css的grid布局

grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。

使用这种布局方式只需要给外层容器（父容器）设置 display: grid; 此时容器的直接子元素就会自动称为grid布局的元素。

.grid {display: grid
}

grid布局中的属性：

.grid {/* 为grid盒子开启grid布局 */display: grid;/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 *//* grid-template-columns: 300px; *//* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */grid-template-columns: 1fr 1fr 1fr;/* 使用column-gap属性设置列间距 */column-gap: 10px;/* 使用row-gap设置行间距 */row-gap: 10px;/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */gap: 10px;}

对元素进行排列时，grid-template-areas属性的用法：

<style>/* 使用grid布局实现三列布局 */.grid {/* 为grid盒子开启grid布局 */display: grid;/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 *//* grid-template-columns: 300px; *//* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */grid-template-columns: 1fr 1fr 1fr;/* 使用column-gap属性设置列间距 */column-gap: 10px;/* 使用row-gap设置行间距 */row-gap: 10px;/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */gap: 10px;}.grid div {/* width: 33vw; */height: 70px;background-color: skyblue;border: 1px solid black;}.grid1 {margin-top: 50px;display: grid;/* 排列元素我们可以使用grid-template-areas属性，注意这里是设置了三行表格，并且每列用3分进行分布的 */grid-template-areas:"header header header""sidebar content content""footer footer footer"}header {/* 命名此空间为header */grid-area: header;background-color: skyblue;height: 60px;}aside {grid-area: sidebar;background-color: red;height: 60px;}main {grid-area: content;background-color: blue;height: 60px;}footer {grid-area: footer;background-color: green;height: 60px;}
</style>

grid布局的对齐方式

grid布局的对齐方式和flex布局对齐方式类似，有水平方向的行轴和垂直方向的块轴。

在垂直方向上对齐子元素（对网格中的元素）是使用align-items：

.grid {display: grid;align-items: center|end  //沿垂直轴居中、靠下对齐
}

在水平方向上对齐子元素是使用justify-items：

.grid {display: grid;justify-items: center|end|space-between  //居中、靠右、两段对齐
}

当行轨道和列轨道(整体网格)小于grid容器时，还可以对轨道进行对齐：

.grid {display: grid;align-content: center|end; //在垂直方向上使用align-content设置对其方式：justify-content: center|end|between //在水平方向使用justify-content设置对其方式
}

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 使用flex布局实现三列排布 *//* 使用grid布局实现三列布局 */.grid {/* 为grid盒子开启grid布局 */display: grid;/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 *//* grid-template-columns: 300px; *//* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */grid-template-columns: 1fr 1fr 1fr;/* 使用column-gap属性设置列间距 */column-gap: 10px;/* 使用row-gap设置行间距 */row-gap: 10px;/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */gap: 10px;}.grid div {/* width: 33vw; */height: 70px;background-color: skyblue;border: 1px solid black;}.grid1 {width: 100vw;height: 100vh;border: 1px solid black;margin-top: 50px;display: grid;/* 排列元素我们可以使用grid-template-areas属性，注意这里是设置了三行表格，并且每列用3分进行分布的 */grid-template-areas:"header header header""sidebar content content""footer footer footer"}header {/* 命名此空间为header */grid-area: header;background-color: skyblue;height: 60px;}aside {grid-area: sidebar;background-color: red;height: 60px;}main {grid-area: content;background-color: blue;height: 60px;}footer {grid-area: footer;background-color: green;height: 60px;}.grid2 {border: 1px solid black;display: grid;grid-template-columns: 300px 300px 300px;gap: 20px;/* 让整个网格居中显示 */justify-content: center;/* 使表格内部的表格元素居中显示 */justify-items: center;}.grid2 div {height: 100px;background-color: skyblue;}
</style><body><div class="grid"><div class="column1">column1</div><div class="column2">column2</div><div class="column3">column3</div><div class="column4">column4</div><div class="column5">column5</div><div class="column6">column6</div></div><div class="grid1"><header>头部</header><aside>侧边栏</aside><main>内容</main><footer>底部</footer></div><div class="grid2"><div class="column1">column1</div><div class="column2">column2</div><div class="column3">column3</div><div class="column4">column4</div><div class="column5">column5</div><div class="column6">column6</div></div>
</body></html>

使用flex布局和grid布局实现三列表格布局：

flex布局：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 使用flex布局实现三列排布 */.grid {display: flex;flex-wrap: wrap;/* box-sizing: border-box; */width: 100vw;/* height: 100vh; */}.grid div {width: 33vw;height: 70px;background-color: skyblue;border: 1px solid black;}/* 使用grid布局实现三列布局 */
</style><body><div class="grid"><div class="column1">column1</div><div class="column2">column2</div><div class="column3">column3</div><div class="column4">column4</div><div class="column5">column5</div><div class="column6">column6</div></div>
</body></html>

grid布局实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 使用flex布局实现三列排布 *//* 使用grid布局实现三列布局 */.grid {/* 为grid盒子开启grid布局 */display: grid;/* 使用grid-template-column 属性指定每列的宽度,可以是固定宽度px，也可以是浮动宽度fr，fr是grid布局专用单位，代表grid剩余空间 *//* grid-template-columns: 300px; *//* 这里有三个数据，就说明grid的分布图为3列形式，这里都相等表示均分剩余空间 */grid-template-columns: 1fr 1fr 1fr;/* 使用column-gap属性设置列间距 */column-gap: 10px;/* 使用row-gap设置行间距 */row-gap: 10px;/* 或者使用gap属性统一设置，一下代码等同于上两行代码 */gap: 10px;}.grid div {/* width: 33vw; */height: 70px;background-color: skyblue;border: 1px solid black;}
</style><body><div class="grid"><div class="column1">column1</div><div class="column2">column2</div><div class="column3">column3</div><div class="column4">column4</div><div class="column5">column5</div><div class="column6">column6</div></div>
</body></html>

css的grid布局相关推荐

php 邮币卡源码,如何使用CSS的Grid布局实现小松鼠邮票的效果（附源码）
本篇文章给大家带来的内容是关于如何使用CSS的Grid布局实现小松鼠邮票的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源 ...
CSS 网格(Grid)布局
CSS Grid 布局是一种二维布局方式,可以将页面分成行和列,并在其中放置元素.使用 Grid 布局时,需要定义网格容器和网格项目. 第一步,在网格容器元素(通常是一个 div)上设置 displa ...
2020-09-02 html的RGB与CMYK + css的grid布局 + JS的输入类型选择器返回DOM元素 + 软技能的http3
2020-09-02 题目来源:http://www.h-camel.com/index.html [html] HTML采用的是RGB颜色还是CMYK颜色?为什么? RGB色彩模式,红绿蓝三原色. ...
透彻理解css的grid布局
一.grid布局是什么? grid即网格布局,是css中功能最强大的布局. 二.grid布局中的基本概念容器:包裹子元素的元素称为容器项目:被父元素包裹的子元素称为项目 <div class ...
前端每日实战：143# 视频演示如何用 CSS 的 Grid 布局创作一枚小松鼠邮票
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YOoXpv 可交互视频此视频是可 ...
前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频此视频是可 ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...

css的grid布局

css的grid布局

grid布局中的属性：

对元素进行排列时，grid-template-areas属性的用法：

grid布局的对齐方式

使用flex布局和grid布局实现三列表格布局：

css的grid布局相关推荐

最新文章

热门文章