display:grid的基本使用、行和列的基本设置、间距、行列宽高

您所在的位置：网站首页 › 如何调间距行距 › display:grid的基本使用、行和列的基本设置、间距、行列宽高

display:grid的基本使用、行和列的基本设置、间距、行列宽高

2024-07-04 11:10:14| 来源: 网络整理| 查看: 265

w3school介绍的超级详细

跟着敲了一遍……

浏览器兼容问题：在这里插入图片描述

两边对齐可以选择宫格化布局。

在这里插入图片描述

DOCTYPE html> .grid-container { display:grid; /* grid-gap: 30px 50px */ grid-column-gap:30px; grid-row-gap: 50px; /* 一行放两列、两个auto */ grid-template-columns: auto auto; background-color: palevioletred; padding: 10px; } .grid-item { background-color: #fff; border: 1px solid #999; padding: 20px; font-size: 30px; text-align: center; } 1 2 3 4 5 6 7 8 9 请使用 grid-column-gap 属性调整列之间的空间。请使用 grid-row-gap 属性调整行之间的空间。属性的简单介绍 1.grid-column-gap

grid-column-gap 属性设置列之间的间隙：

2. grid-row-gap

grid-row-gap 属性设置行之间的间隙：

3. grid-gap

grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：

.grid-container { display: grid; grid-gap: 30px 50px; /*grid-column-gap:30px; grid-row-gap: 50px;*/ } 4. grid-column 属性：

grid-column 属性定义将项目放置在哪一列上。您可以定义项目的开始位置以及结束位置。

注释：grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。如需放置某个项目，您可以引用行号（line numbers），或使用关键字 “span” 来定义该项目将跨越多少列。

使 “item1” 从第 1 列开始并在第 5 列之前结束： .item1 { grid-column: 1 / 5; }

在这里插入图片描述

5. grid-row属性

grid-row 属性定义了将项目放置在哪一行。

注释：grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性。如需放置项目，您可以引用行号，或使用关键字 “span” 定义该项目将跨越多少行：

使 “item1” 在 row-line 1 开始，在 row-line 4 结束：

.item1 { /* grid-column: 1 / 5; */ grid-row: 1 / 5; }

在这里插入图片描述

6.grid-template-columns 属性 grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。该值是以空格分隔的列表，其中每个值定义相应列的长度。如果您希望网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。

两个auto就是一行放两个且等宽。

grid-template-columns: auto auto; 7.grid-template-rows 属性

grid-template-rows 属性定义每列的高度。

.grid-container{ grid-template-rows: 50px 100px 150px; }

在这里插入图片描述

fr的使用

MDN介绍在这里插入图片描述

找到了自我这是一篇你看不懂的文章 OK Fine .list { margin-top: 20px; display: grid; grid-template-columns: auto auto; .list-item { padding: 15px 20px; text-align: center; border: solid 1px silver; } }

使用auto时候、内容会自动分配所占空间。在这里插入图片描述

备注： fr单位分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。

使用fr

grid-template-columns: 1fr 1fr;

在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

display:grid的基本使用、行和列的基本设置、间距、行列宽高

display:grid的基本使用、行和列的基本设置、间距、行列宽高

今日新闻

点击排行

推荐新闻

图片新闻

专题文章