[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 asgrid-row-start: 2;*/}.grid-item:nth-of-type(6) {grid-column: 3 / span 2;/* the same asgrid-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>

转载于:https://www.cnblogs.com/Answer1215/p/6624977.html

[Grid Layout] Place grid items on a grid using grid-column and grid-row相关推荐

愿只有一个Grid Layout
CSS3新增布局三剑客之Grid Layout 一.前言相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里 ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
[Grid Layout] Specify a grid gutter size with grid-gap
It's beautifully straightforward to add a gutter to our grid layout. Let's apply one with grid-gap. ...
SAP Spartacus b2b 页面 banner 的grid layout设计
如下图所示: 每个banner里的a标签,都应用了grid layout模型: this element behaves like a block element and lays out its c ...
css高度自动填满_Unity--自动版面（Grid Layout Group）
Grid Layout Group 网格布局组组件将其子布局元素放置在网格中. Padding:(填充) 布局组边缘内的填充.与其他布局组不同,"网格布局组"将忽略其所包含布局元素 ...
Unity3d Ugui 20 Grid Layout Group Aspect Ratio Fitter
Grid Layout Group网格布局属性 Padding:布局组内边缘偏移. Cell Size:要用于组内每个布局元素的大小. Spacing:布局子元素之间的间距. Start Corne ...
html设定列的最小宽度,设置Grid Layout列最小宽度的方法
设置Grid Layout列最小宽度的方法发布时间:2020-08-29 11:22:09 来源:亿速云阅读:184 作者:小新这篇文章主要介绍设置Grid Layout列最小宽度的方法,文中介 ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
css grid设置宽度,如何设置Grid Layout （网格布局）列的最小宽度
如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数,下面我们就来看具体的内容. 我们先来看一下minmax()函数的格式m ...

[Grid Layout] Place grid items on a grid using grid-column and grid-row

[Grid Layout] Place grid items on a grid using grid-column and grid-row相关推荐

最新文章

热门文章