[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是二维的更加全面的网格布局,
随机推荐
- HDU 4607 Park Visit HDU暑期多校1
10W个点的一棵树,边权为1 求访问K个点要走过的最小路程 BFS求出一条最长路以后,我们可以YY出其他的边都要重复走两次 树上的最长路可以从任意一点开始BFS求出这点的最大距离,再把终点设置为起点再 ...
- MFC窗口显隐
使用SetLayeredWindowAttributes可以方便的制作透明窗体,此函数在w2k以上才支持,而且如果希望直接使用的话,可能需要下载最新的SDK.不过此函数在w2k的user32.dll里 ...
- CISP/CISA 每日一题 16
CISA 每日一题(答) 作业调度软件的优点: 1.作业信息仅需建立一次,减少错误发生概率: 2.可定义作业间的依赖关系,当某一项作业失败时,依赖于该作业的后续作业就不会被执行: 3.所有成功或失败的 ...
- java 钩子方法
Runtime.getRuntime().addShutdownHook(shutdownHook); 这个方法的含义说明: 这个方法的意思就是在jvm中增加一个关闭的钩子,当jv ...
- 请使劲回答一个关于UNIX/Linux自己主动扩展stack的问题
有本事就出来,没本事就当鳖! 假设让我回答关于进程栈,线程栈的问题,仅仅要问题不笼统,仅仅要问题明白.我会一五一十地回答,正确率上九成,然而,可悲的是,问题往往他妈的都不是非常明白,因此,游戏到此结束 ...
- 修改chrome的安装目录（默认的竟然安装在documents and settings目录，google真不厚道）
修改chrome的安装目录(默认的竟然安装在documents and settings目录,google真不厚道) 把chrome从系统目录提取出来 Vista下,Win+R运行 C:/Users/ ...
- javasciprt cookies 操作
<script type="text/javascript"> function getCookie(c_name){ if (document.cookie.leng ...
- 00089_字节输出流OutputStream
1.字节输出流OutputStream (1)OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法: (2)输出流中定义都是写wri ...
- css滑动鼠标到img后，切换图片
写了个样例: <a href="#"><img src="http://csdnimg.cn/pubfooter/images/gongshang_lo ...
- 关于http请求指定本地ip
static void Main(string[] args) { //ssl证书验证问题(没有校验) ServicePointManager.ServerCertificateValidationC ...