垂直居中grid方案

垂直居中有多个方案,flex/table-cell/line-height/margin/padding等,现在说下grid方案,了解grid网格布局

<div class="box">              
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
      <div class="cell">6</div>
      <div class="cell">7</div>
      <div class="cell">8</div>
</div>

在多个子元素下,设置父级 display:grid,grid-template-columns设置列数和列宽,可以单独设置grid-template-columns:60px 60px 60px 60px,grid-gap: grid-row-gap grid-column-gap;

grid-gap为行距和列距简写,align-items和justify-items为内容居中设置

        display: grid;
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: repeat(2, 60px);
        grid-gap: 10px;
        align-items: center;
        justify-items: center;  
        justify-content: center;
        align-content: center;
        width: 100%;
        height: 500px;
        background: #f3f3f3;

 

版权声明:
作者:wuhou123
链接:https://wuhou.fun/509.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
垂直居中grid方案
垂直居中有多个方案,flex/table-cell/line-height/margin/padding等,现在说下grid方案,了解grid网格布局 <div class="box"> &l……
<<上一篇
下一篇>>
文章目录
关闭
目 录