Grid布局

香菊网 发表于: 2019-06-03 分类: css  H5部分  前端front  

介绍

CSS Grid可轻松构建复杂的Web设计。它的工作原理是将HTML元素转换为具有行和列的网格容器,以便将子元素放置在网格中所需的位置。

通过将元素的父级设置display: grid;转化为网格布局。

<div class="grid-wrap">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>
.grid-wrap {
  display: grid;
}

grid

设置列

grid-template-columns 将网格划分为n列,并设置一个宽度,属性的参数数量就是划分为具体的多少列

.grid-wrap {
  display: grid;
  grid-template-columns: 50px 200px 80px;
}

grid

设置行

grid-template-rows 设置网格的每一行的高度

.grid-wrap {
  display: grid;
  grid-template-columns: 50px 200px 80px;
  grid-template-rows: 50px 80px;
}

grid

通过单位更改行和列的宽和高

fr 自适应单位,根据剩余的宽度分配所占比例

auto 将元素设置为自身的宽高

% 根据容器的宽和高去计算百分比

设置每列与每行之间的空隙

grid-column-gap 设置每列之间的空隙

grid-row-gap 设置每行之间的空隙

.grid-wrap {
  display: grid;
  grid-template-columns: 80px 200px 1fr;
  grid-template-rows: 50px 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  width: 330px;
  height: 150px;
}

grid

标签: cssH5部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮