[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是二维的更加全面的网格布局,
随机推荐
- JavaScript 实现表格单列按字母排序
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- codeforces 1037E. Trips（倒叙）
题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...
- 五、Docker+Sqlserver
原文:五.Docker+Sqlserver sqlserver现在支持linux了.所以可以运行在docker内 一.下载镜像: docker pull microsoft/mssql-server- ...
- IntelliJ IDEA 2018 Community(社区版)创建J2EE项目+Tomcat9部署
博主打算开始系统地自学JAVA,首要问题就是解决IDE的问题, 以前用过像VS.Android Studio.Eclipse,知道Eclipse是JAVA最传统的IDE, 用过VS和AS的朋友都知道, ...
- BFS模版程序
本文转自q=bfs&u=cnyali&t=blog">http://so.csdn.net/so/search/s.do?q=bfs&u=cnyali& ...
- 1.1 Introduction中 Guarantees官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Guarantees Kafka的保证(Guarantees) At a high- ...
- 基于EmguCV的摄像机标定及矫正
标签: EmguCV摄像头标定C# 2015-05-03 14:55 501人阅读 评论(6) 收藏 举报 分类: C# 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] ...
- 自己写的Android图表库XCL-Charts一些旧的样例
话说有了灵感就要抓住,来了兴趣就要去研究它. 所以尽管近期非常忙.但我还是没有丢下Android图表实现的研究.最终如今我的图表库基类 基本上已经有点模样了.不在是小打小闹,而是能依传入參数非常灵活的 ...
- CentOS7安装docker 18.06
原文:CentOS7安装docker 18.06 一.CentOS Docker 安装 参考docker 官方网站:https://docs.docker.com/install/linux/dock ...
- 关于LWIP断开网线后重连问题（热插拔问题）
近期在弄STM32+LWIP协议.在网络拔掉网线情况下.无法又一次连接. 网上找了好多方法都没有实现,着实郁闷! 后来无意间看到了临时解决这一问题的方法.尽管不是那么完美,但最算能解决这个问题.分享给 ...