江苏龙网

  1. 主页 > 生活百科 > >

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

网络技巧

.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);}这样，我们网格中嵌套了一个网格 。
使用网络构建复杂布局超实用的技巧，赶紧收藏吧

文章插图
 
今天就跟大家分享到这里，感谢大家的观看，我们下期再见！


推荐阅读


上一篇：Elasticsearch全攻略

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