[Grid Layout] Place grid items on a grid using grid-column and grid-row
It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-place-grid-items-on-a-grid-using-grid-column-and-grid-row</title>
<style>
.grid-item {
background-color: cadetblue;
} .container {
display: grid;
grid-gap: 15px;
height: 100vh;
grid-template-columns: 100px 200px auto auto;
} .grid-item:nth-of-type(2) {
grid-row: span 2;
/* the same as
grid-row-start: 2;
*/
} .grid-item:nth-of-type(6) {
grid-column: 3 / span 2;
/* the same as
grid-column-start: 3;
grid-column-end 5
*/
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
[Grid Layout] Place grid items on a grid using grid-column and grid-row的更多相关文章
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- CSS3 & Grid Layout All In One
CSS3 & Grid Layout All In One W3C https://www.w3.org/TR/css-grid-1/ Grid Layout is a new layout ...
- [Grid Layout] Use the repeat function to efficiently write grid-template values
We can use the repeat() function if we have repeating specifications for columns and rows. With the ...
- [Grid Layout] Describe a grid layout using named grid lines
We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...
- [CSS] Get up and running with CSS Grid Layout
We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...
- CSS3 GRID LAYOUT
CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/
- iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6
In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...
- Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
- WPF笔记(2.4 Grid)——Layout
原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...
- flexbox与grid layout的区别
flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,
随机推荐
- UVA 12333 Revenge of Fibonacci
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 去掉“此电脑”中的“WPS云文档”图标
平台:Win10 问题:安装了WPS2019专业版后,此电脑窗口出现了一个WPS云文档图标,无法删除,云文档设置中也无法取消. 解决:打开注册表,定位到HKEY_CURRENT_USER\Softwa ...
- JS前端监控机制的建立
JS前端监控机制: 1.采用try...catch...,和window.onerror的形式. 2.最终形成错误日志文件,并发送邮件和短信的形式进行报警. 3.如果是跨域请求,在script标签上要 ...
- 你真的懂Flask中浅谈蓝图Blueprint吗？
一,什么是Flask中的蓝图Blueprint Blueprint是用于实现Flask框架中单个应用的视图,模板,静态文件的集合. Blueprint 是一个存储操作(路由映射)方法的容器,这些操作在 ...
- 【习题 7-2 UVA-225】Golygons
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力枚举每次走哪里就好. 用一个二维数组来判重.(数据里,要求不能经过一个点两次->但路径可以相交 然后再用一个flag数组, ...
- startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag
startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVI ...
- hibernate 的映射文件快速生成：使用CodeSmith快速生成映射文件和映射类
一 CodeSmith简介 本文以表自动生成NHibernate的映射文件和映射类的实例来说明一下本软件的使用方法. CodeSmith是一种基于模板的代码生成工具,其使用类似于ASP.NET的语法来 ...
- 学习笔记：TypeScript入门——基础类型
前言: TypeScript官网断断续续看过几遍,不知道项目中如何使用,有机会还是要实践一下.现在再把文档上不懂的知识点理一遍. 基础类型 1.什么是元组Tuple? 元组类型允许表示一个已知元素数量 ...
- Dynamic device virtualization
A system and method for providing dynamic device virtualization is herein disclosed. According to on ...
- swift开发多线程篇 - NSThread 线程相关简单说明(一些使用和注意点)
一 说明 本文涉及代码可以从https://github.com/HanGangAndHanMeimei/Code地址获得. 二 NSThread的基本使用和创建 1)基本用法(主线程|当前线程) 1 ...