警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>display-grid定义一个网格

display-grid定义一个网格

原创2019-05-22HTML/CSS771 次阅读 · 读完需要 2 分钟。

要定义网格,请在父元素上使用display: grid或display:inline-grid。然后可以使用grid-template-columns和grid-template-rows属性创建网格。

我使用grid-gap属性在列和行之间创建一个10px的空白。此属性是grid-column-gap和grid-row-gap的简写,因此可以单独设置这些值。

父元素的所有直接子元素现在都成为网格项,自动放置算法将它们放置在每个网格单元中。根据需要会自动创建所需要的行

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
}
.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

查看示例

赞(0) 打赏
未经允许不得转载:W3Cbest前端开发>display-grid定义一个网格

相关推荐

发表评论