[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是二维的更加全面的网格布局,
随机推荐
- 3.字符设备驱动------Poll机制
1.poll情景描述 以之前的按键驱动为例进行说明,用阻塞的方式打开按键驱动文件/dev/buttons,应用程序使用read()函数来读取按键的键值. ) { read(fd, &key_v ...
- 【2017 Multi-University Training Contest - Team 7】Just do it
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6129 [Description] 设定b[i]=a[1]^a[2]^a[3]^------a[i] ...
- 洛谷——V1772 巧妙填数
描述 将1,2,\cdots,91,2,⋯,9共99个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:31:2:3的比例. 试求出所有满足条件的三个三位数.例如:三个三位数192,384, ...
- 洛谷 P1679 神奇的四次方数
P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...
- 7,NULL与nullptr对比
#include <iostream> #include <array> using namespace std; void show(int num) { cout < ...
- Day1：变量
一.变量用来干嘛的 用来存东西的,方便后面调用 二.如何定义变量 name = "Hiuhung Wan" 变量名 = 值,一个等号是赋值号,右边的值赋值给左边 三.变量的一些用法 ...
- centos7.0查看IP
原文:centos7.0查看IP 输入ip查询命名 ip addr 也可以输入 ifconfig(centOs7没有ifconfig命令)查看ip,但此命令会出现3个条目,centos的ip地址是e ...
- 读文件头数据判断 PE 文件格式和类型
namespace X.Reflection { using System; using System.IO; public static partial class ReflectionX { pu ...
- Spring view controller
https://www.zifangsky.cn/648.html https://www.zifangsky.cn/665.html https://www.zifangsky.cn/671.htm ...
- [Angular] Design API for show / hide components based on Auth
Simple Auth service: import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/ ...