[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是二维的更加全面的网格布局,
随机推荐
- （转）Tomcat文件详解
做web项目,最常用的服务器就是Apache的tomcat.虽然一直在用tomcat,但都是仅限在使用的阶段,一直没有深入学习过.想深入学习tomcat,首推的肯定是官网:http://tomcat. ...
- jsp 用shiro 的判断 是否有菜单查看的权限
实例:spring-shiro.xml 123 /admin/repairType/index = roles["ROLE_ADMIN"]/admin/user=roles[&qu ...
- Skill of vim
用vim也有一段时间了,谨以此记下一些有意思的技巧. 跳转 hjkl,左下右上. b/e跳转到上/下一个单词 ^/$跳转到行头/尾 从{,[,(,相应的},],)相互跳转.能够用% 跳转到局部变量的定 ...
- Objective-C - 类的静态常量
创建头文件(.h), 导出常量: // Constants.h FOUNDATION_EXPORT NSString *const MyFirstConstant; FOUNDATION_EXPORT ...
- Dell shareplex 与HVR数据复制软件
今天大体了解了一下Dell shareplex 数据复制软件,网址为:http://software.dell.com/products/shareplex/ 从该网址能够看到. shareplex作 ...
- Mongodb总结1-启动和Shell脚本
2013年,还在秒针,当时听说了Mongodb,就学习了下,搞了下HelloWorld.主要是熟悉Mongodb的启动.命令行的Shell脚本.Java访问的CRUD. 今天,由于需要,再次回顾和进一 ...
- BZOJ——T2190: [SDOI2008]仪仗队
Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 3216 Solved: 2075[Submit][Status][Discuss] http://w ...
- Windows 64位下 python3.4.3 安装numpy scipy
Numpy: 1.在开始菜单搜索cmd打开 终端 2.在终端输入python -m pip install -U pip 3.到http://www.lfd.uci.edu/~gohlke/pytho ...
- Altium Designer画异型焊盘的步骤
注:如果要画的是过孔,就需要加入底层的
- 芯片TPS76030、TPS76032、TPS76033、TPS76038、TPS76050 电源芯片
下图是从网上摘出来的图片:TPS76033 它的作用就是改变电压: 输入电压:3.5V到16V 通过芯片的处理后 输出电压:3.3V 要学会看图,从中提取有用的信息 再看一个数据手 ...