作者:Shadeed
译者:前端小智
起源:dmitripavlutin
点赞再看 ,微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景,但有着一股向上踊跃心态人。本文
GitHub
https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。
最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。
github 地址:https://github.com/qq44924588…
网格布局是古代 CSS 中最弱小的性能之一。应用网格布局能够帮忙咱们在没有任何内部 UI 框架的状况下构建简单的、疾速响的布局。在这篇文章中,将会介绍所有咱们须要理解的 CSS 网格常识 ?。
CSS 网格的基础知识
咱们间接进入代码,如下所示,先写些标签,源码在这个链接外面:https://codepen.io/Shadid/pen/zYqNvgv
<div class="container">
<header>Header</header>
<aside>Aside 1</aside>
<section>Section</section>
<aside>Aside 2</aside>
<footer>Footer</footer>
</div>
在下面,咱们创立了一个 header
、两个aside
和一个 footer
元素,并将它们包装在一个container
元素中。咱们为容器元素中的所有元素增加背景色和字体大小。
.container > * {
background: aquamarine;
font-size: 30px;
}
运行的网页如下:
当初咱们增加一些网格属性:
.container {
display: grid;
grid-gap: 5px;
grid-template-areas:
"header"
"aside-1"
"aside-2"
"section"
"footer"
}
/* Assign grid areas to elements */
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 元素调配了一个网格区域名称。在container 类中,咱们能够应用
grid-template-areas` 属性定 义 html 模板的外观,留神网格模板区域是如何排列的。
grid-template-areas:
"header"
"aside-1"
"aside-2"
"section"
"footer"
元素的程序与 dom 构造不同。然而,最终按咱们网络区域的程序来展现。
下一步是使咱们的页面具备响应性。咱们心愿在更大的屏幕上应用不同的布局。CSS 网格使得解决媒体查问和创立响应式布局变得非常容易。看上面代码:
@media (min-width: 670px) {
.container {
grid-template-areas:
"header header header"
"aside-1 section aside-2"
"footer footer footer"
}
}
咱们所要做的就是在媒体查问中从新排序网格模板区域。
网格列和行
如何应用 CSS 网格来组织列和?先从上面的代码开始:
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
</div>
增加一些根本的 css
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
}
.item {background: lightcoral;}
咱们为下面的 dom 构造应用了网格布局,并应用 grid-gap
减少了格调之间的间距。当初,咱们应用 grid-template-columns
属性来增加一些列。
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
grid-template-columns: 100px 200px auto auto;
}
就像这样,咱们应用了列。咱们指定第一列为 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: span 2;
}
对于 span 2
,指定div
占用网格中的两个插槽。当初,假如要扩大 第二列
填充上面的空白区域。咱们也能够通过 grid-column-start
属性轻松地做到这一点。
.item:nth-of-type(2) {grid-row-start: span 2;}
咱们应用 span
和grid-row-start
来指定咱们想要占据两个插槽。
如上所见,咱们曾经可能应用大量的 CSS 网格属性来构建非常复杂的布局。
无效地应用 grid-templates
当初来看看grid-templates
,在本节中,咱们将探讨如何为不同的屏幕大小创立不同的布局。
首先,还是先来一段 dom 构造:
<div class="container">
<header>header</header>
<aside>Left</aside>
<section>Section</section>
<aside>Right</aside>
<footer>Footer</footer>
</div>
接着,增加一些款式:
“
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
}
.container > * {
background: coral;
display: flex;
justify-content: center;
align-items: center;
}`
“
咱们给元素增加了背景色。从下面的代码中能够看到,咱们也应用了 flex
属性。咱们能够将 flex
和grid
联合在一起。在这个非凡的例子中,咱们应用 flex
属性核心对齐内容。
对于挪动端,咱们心愿 section
在header
上面,right
在 section
上面,咱们能够应用网格区域来实现。首先,咱们定义网格区域:
.container {
display: grid;
height: 100vh;
grid-gap: 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
。此外,咱们心愿咱们的section
比 left
和 right
都大点。为了实现这一点,咱们能够应用 rid-template-rows
属性 ?
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
grid-template-areas:
"header"
"section"
"right"
"left"
"footer";
grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}
少了一张图片
咱们能够依据须要设置挪动端的视图,接下咱们应用媒体查问来适配一下大屏幕:
@media (min-width: 500px) {
.container {
grid-template-areas:
"header header header"
"left section right"
"footer footer right";
grid-template-rows: 1fr 6fr 1fr;
grid-template-columns: 1fr 6fr 1fr;
}
}
如何应用 minmax
函数动静跟踪元素的大小
假如咱们有两列,它们平均地占据了屏幕上的可用空间。通过应用 grid-template-columns
,咱们能够很容易地做到这一点。然而,如果咱们想要其中一个在 200px
到500px
之间呢? 咱们的列能够适应不同的屏幕尺寸,但其中一个永远不会大于 500px
或小于200px
。
对于这些类型的场景,咱们应用 minmax
函数。让咱们来看看它的实际效果。
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
</div>
.container {
display: grid;
height: 100vh;
grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {background: cyan;}
.two {background: pink;}
在这个例子中,第一列总是在 200px
到500px
之间。然而,第二列的最小值能够是100px
,对于更大的屏幕,它将笼罩屏幕的其余部分。
如何应用 repeat 函数?
咱们讨论一下元素中的反复模式。咱们如何解决它们? 咱们能够反复咱们的代码或应用 javascript。不过,还有另一种办法能够用 css 来实现。repeat
函数示意轨道列表的一个反复片段,容许以更紧凑的模式编写显示反复模式的大量列或行。
<div id="container">
<div>
This item is 50 pixels wide.
</div>
<div>
Item with flexible width.
</div>
<div>
This item is 50 pixels wide.
</div>
<div>
Item with flexible width.
</div>
<div>
Inflexible item of 100 pixels width.
</div>
</div>
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
嵌套网格
我还能够将网格嵌套在另一个网格中,来看看如何实现这一点:
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item inner-grid">
<div class="item">i</div>
<div class="item">ii</div>
<div class="item">iii</div>
<div class="item">iv</div>
<div class="item">v</div>
<div class="item">vi</div>
</div>
<div class="item">Five</div>
<div class="item">Six</div>
</div>
咱们首先在内部 container
上申明网格:
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}
留神,咱们在网格模板中有一个 repeat
函数,并将其与一个 minmax
函数组合在一起。咱们当初也能够将网格属性利用到外部网格。
.inner-grid {
display: grid;
background: white;
height: 100%;
grid-gap: 5px;
grid-template-columns: repeat(3, auto);
}
这样,咱们网格中嵌套了一个网格。
明天就跟大家分享到这里,感激大家的观看,咱们下期再见!
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://blog.soshace.com/how-…
交换
文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。