[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是二维的更加全面的网格布局,
随机推荐
- ORA-16047: DGID mismatch between destination setting and standby
主库有报错如下: ORA-16047: DGID mismatch between destination setting and standby 原因:主库参数设置错误,检查下列参数:log_arc ...
- 7.Linux 输入子系统分析
为什么要引入输入子系统? 在前面我们写了一些简单的字符设备的驱动程序,我们是怎么样打开一个设备并操作的呢? 一般都是在执行应用程序时,open一个特定的设备文件,如:/dev/buttons .... ...
- HDU 3131 One…Two…Five! （暴力搜索）
题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...
- html5 audio标签相关知识点总结
1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...
- 我在世界最热创业孵化器YC学到的58件事
Amir Elaguizy是网络扑克游戏平台MarketZero创始人,2011年,他创立的这家公司被Zynga收购,后在Zynga担任HTML5扑克游戏的CTO.目前他同时是社会化点评网站lark. ...
- tomcat的classloader机制
本系列博客打算分析一下tomcat7.x的源码,其中可能会穿插一些java基础知识的介绍 读tomcat的源码的时候,我建议和官方的User Guide一起阅读,明白tomcat做某件事情的目的之后 ...
- 【Codeforces Round #299 (Div. 2) C】 Tavas and Karafs
[链接] 我是链接,点我呀:) [题意] 给你一个规则,让你知道第i根萝卜的高度为si = A+(i-1)*B 现在给你n个询问; 每次询问给你一个固定的起点l; 让你找一个最大的右端点r; 使得l. ...
- Java基础学习总结(49)——Excel导入导出工具类
在项目的pom文件中引入 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifac ...
- BZOJ 3038 上帝造题的七分钟2 树状数组+并查集
题目大意:一个序列,有两种操作.1.将一段数中的每个数开根号.2.查询一段数的和. 思路:和3211是一个题,有兴趣的能够看看我的那篇博客. CODE: #include <cmath> ...
- javascript面对对象编程 之继承
上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承.在javascript中没有类的概念,全部不能像c#.java语言那样.直接的用类去继承类.比方如今有比方.如今 ...