江苏龙网

  1. 主页 > 生活百科 > >

使用网络构建复杂布局超实用的技巧，赶紧收藏吧( 二 )

网络技巧

注意，我们使用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>


推荐阅读


上一篇：Elasticsearch全攻略

下一篇：Win10这隐藏功能太良心！远程解决电脑问题神器