跳到主要内容

Grid布局容器属性

常用属性​

显示为三列每一列宽度100px

grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px 
grid-template-columns:repeat(3,100px); //同上

auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

grid-template-columns: repeat(auto-fill,100px);

fr，为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段”)

grid-template-columns:repeat(4,1fr);

minmax()，函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值

grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值

属性使用案例--待补充​

grid-template​

注：文章中部分内容来自这篇博客

示例如下：其中40px是行高，1fr是列宽

grid-template: 
   "a a a" 40px
   "b c c" 40px
   "b c c" 40px / 1fr 1fr 1fr;

在html中的完整示例：

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      height: 500px;
      grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr;
    }

    .box1 {
      background-color: lime;
      grid-area: a;
    }

    .box2 {
      background-color: yellow;
      grid-row: 2 / 4;
      grid-area: b;
    }

    .box3 {
      background-color: blue;
      grid-row: span 3 / 7;
      grid-area: c;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
    </div>
  </body>
</html>
  • grid-template-columns
  • grid-template-rows
  • grid row-gap
  • grid-column-gap
  • grid-gap (3和4的简写)
  • grid-template-areas
  • grid-auto-flow
  • justify-items
  • align-items
  • place-items(8和9的简写)
  • justify-content
  • align-content
  • place-content(11和12的简写)
  • grid-auto-columns
  • grid-auto-rows