当前位置：首页 > Web前端 > HTML

使用CSSGrid构建复杂布局超实用！

时间：2023-04-02 16:25:24 HTML

作者：Shadeed译者：FrontendXiaozhi来源：dmitripavlutin有梦想，有干货，微信搜索【大千世界】关注这个洗碗盘的清晨智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。网格布局是现代CSS中最强大的功能之一。使用GridLayout可以帮助我们在没有任何外部UI框架的情况下构建复杂、快速和响应迅速的布局。在本文中，我们将涵盖我们需要了解的有关CSS网格的所有信息。CSS网格基础直接上代码吧，如下图，先写一些标签，源码在这个链接：https://codepen.io/Shadid/pen/zYqNvgv

Header

Section

在上面，我们创建一个页眉、两个旁边和一个页脚元素，并将它们包装在容器元素中。我们为容器元素内的所有元素添加背景颜色和字体大小。.container>*{背景：海蓝宝石；font-size:30px;}运行页面如下：现在我们添加一些网格属性：.container{display:grid;网格间隙：5px；grid-template-areas:"header""aside-1""aside-2""section""footer"}/*为元素分配网格区域*/header{grid-area:header;}aside:nth-of-type(1){grid-area:aside-1;}aside:nth-of-type(2){grid-area:aside-2;}section{grid-area:section;}footer{grid-area:footer;}首先，我们定义display:grid，这将启用网格布局，然后我们使用grid-gap在网格元素中添加间隙。接下来，我们为每个html元素分配了一个网格区域名称。在容器类中，我们可以使用grid-template-areas`属性来定义html模板的外观，注意网格模板区域是如何排列的。grid-template-areas:"header""aside-1""aside-2""section""footer"元素的顺序与dom结构不同。但是，它最终是按照我们网络区域的顺序呈现的。下一步是让我们的页面响应。我们想在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看看下面的代码：@media(min-width:670px){.container{grid-template-areas:"headerheaderheader""aside-1sectionaside-2""footerfooterfooter"}}Allwe所要做的就是在Reorder网格模板区域中进行媒体查询。Grid列和行如何使用CSSGrid来组织列和行？从以下代码开始：一个

两个

三个

四个五个六个添加一些基本的CSS.container{显示：网格；高度：100vh；grid-gap:10px;}.item{background:lightcoral;}我们对上面的dom结构使用了grid布局，通过grid-gap增加Pitch之间的样式。现在，我们使用grid-template-columns属性来添加一些列。.container{显示：网格；高度：100vh；网格间隙：10px；grid-template-columns:100px200pxautoauto;}像这样，我们使用列。我们为第一列指定100px，为第二列指定200px。由于我们在第3列和第4列应用了auto，因此剩余的屏幕长度将在那里分成两半。您可以看到页面上现在有一个空白区域。如果我想把第六列移到第三列和第四列怎么办？为此，我们可以使用grid-column-start和grid-column-end属性。.item:nth-of-type(6){grid-column-start:3;grid-column-end:5;}请注意，我们使用grid-column-end:5并且值5指向列线。第四列在网格的第五行结束。grid-column-start和grid-column-end值指的是网格线。如果觉得网格线的值比较混乱，也可以使用span，下面的效果同上：.item:nth-of-type(6){grid-column-start:3;grid-column-end:span2;}对于span2，指定的div在grid中占据两个槽位。现在，假设您要扩展第二列以填充下面的空白区域。我们也可以使用grid-column-start属性轻松地做到这一点。.item:nth-of-type(2){grid-row-start:span2;}我们使用span和grid-row-start来指定我们要占用两个槽位。正如您在上面看到的，我们已经能够使用少量CSS网格属性构建非常复杂的布局。有效使用网格模板现在让我们看看网格模板，在本节中我们将讨论如何为不同的屏幕尺寸创建不同的布局。首先，让我们从一个dom结构开始：

header

Section

接下来，添加一些样式：``.container{display:grid;高度：100vh；grid-gap:10px;}.container>*{背景：珊瑚;显示：弹性；证明内容：居中；align-items:center;}```我们为元素添加了背景色。从上面的代码可以看出，我们还使用了flex属性。我们可以将flex和grid结合在一起。在此特定示例中，我们使用flex属性将内容居中对齐。对于移动端，我们希望section在header下，right在section下，我们可以使用gridarea来实现。首先，我们定义网格区域：.container{display:grid;高度：100vh；网格间隙：10px；grid-template-areas:"header""section""right""left""footer"}aside:nth-of-type(1){grid-area:left;}aside:nth-of-type(2){grid-area:right;}section{grid-area:section;}footer{grid-area:footer;}header{grid-area:header;}正如你在grid-template-areas中看到的，我们首先有header，然后是section，然后是right，最后是left。此外，我们希望我们的部分比左侧和右侧都大。为此，我们可以使用rid-template-rowsproperty?.container{display:grid;高度：100vh；网格间隙：10px；网格模板区域：“页眉”“部分”“右”“左”“页脚”；grid-template-rows:1fr6fr2fr2fr1fr;}图片少了一张，我们可以根据需要设置移动端的view，然后我们使用mediaquery适配大屏：@media(min-width:500px){.container{grid-template-areas:"headerheaderheader""leftsectionright""footerfooterright";网格模板行：1fr6fr1fr；网格模板列：1fr6fr1fr；}}如何使用minmax函数动态跟踪元素的大小假设我们有两列，它们平均占据屏幕上的可用空间。我们可以通过使用grid-template-columns很容易地做到这一点。但是，如果我们希望其中之一介于200px和500px之间怎么办？我们的列可以适应不同的屏幕尺寸，但其中一个不会大于500px或小于200px。对于这些类型的场景，我们使用minmax函数。让我们看看它的实际效果。一个两个。容器{显示：网格；高度：100vh；grid-template-columns:minmax(200px,500px)minmax(100px,auto);}.one{background:cyan;}.two{background:pink;}在此示例中，第一列始终介于200px和500px之间.但是，第二列的最小值可以是100px，对于较大的屏幕，它将覆盖屏幕的其余部分。如何使用重复功能？让我们谈谈元素中的重复模式。我们如何处理它们？我们可以重复我们的代码或使用javascript。但是，还有另一种方法可以使用css来实现。repeat函数表示曲目列表的重复片段，允许以更紧凑的形式写入显示重复模式的大量列或行。

这个项目是50像素宽。

具有灵活宽度的项目。

这个项目是50像素宽。

具有灵活宽度的项目。

100像素宽度的固定项目。

#container{显示：网格；网格模板列：重复（2、50px1fr）100px；网格间隙：5px；框大小：边框框；高度：200px；宽度：100%；背景色：#8cffa0；填充：10px;}#container>div{背景颜色：#8ca0ff;;}嵌套网格我还可以将一个网格嵌套在另一个网格中，看看如何做到这一点：One两个三个iiiiiiivvvi56我们先上外部container声明网格：.container{display:grid;高度：100vh；网格间隙：10px；grid-template-columns:repeat(auto-fill,minmax(200px,auto))}请注意，在网格模板中我们有一个repeat函数，并将其与minmax函数结合使用，我们现在也可以将网格属性应用于内部网格..inner-grid{显示：网格；背景：白色；高度：100%；网格间隙：5px；grid-template-columns:repeat(3,auto);}这样我们的grid中就嵌套了一个grid。今天就分享给大家，感谢大家的观看，我们下期再见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://blog.soshace.com/how-...交流有梦想，有干货，微信搜索【大招天下】关注这位凌晨还在洗碗的洗碗智者.本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。

上一篇：html标签-HTML5精讲ID：6.1【表正经】#HTML教程#HTML5教程#html标签

下一篇：前端面试日常3+1——Day166

使用CSSGrid构建复杂布局超实用！相关文章

最新推荐

猜你喜欢