Grid布局-一例三写法入门grid布局

Grid布局 是CSS中最强大的布局系统，其属性繁杂，还有各种简写，但是举个例子很容易理解并上手grid布局。

html结构如下

<div class="container">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>

用三种写法实现如下布局

grid-layout

写法1

.container {
  border: 1px solid #000;
  height:50vh;
  display: grid;
  grid-template-columns: 10% auto 10%;
  grid-template-rows: 50px auto 50px;
  grid-template-areas:
    "header header header"
    ". main aside"
    "footer footer footer"
}

.header {
  grid-area: header;
  background-color: pink;
}

.main {
  grid-area: main;
  background-color: blue;
}
.aside{
  grid-area: aside;
  background-color: yellow;
}
.footer{
  grid-area: footer;
  background-color: red;
}

这是种比较容易理解但是写起来不够方便的写法。

• grid-template-columns和grid-template-rows分别定义了网格纵向和横向的长度
• grid-template-areas给每个子项定义了用处
• 子项中绑定grid-area

写法2-简写为grid-template

.container {
  border: 1px solid #000;
  height:50vh;
  display: grid;
  grid-template:
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% auto 10%
}

.header {
  grid-area: header;
  background-color: pink;
}

.main {
  grid-area: main;
  background-color: blue;
}
.aside{
  grid-area: aside;
  background-color: yellow;
}
.footer{
  grid-area: footer;
  background-color: red;
}

这个写法仅仅是将grid-template-columns、grid-template-rows、和 grid-template-areas三个属性简写为grid-template，子项仍旧需要绑定grid-area。

写法3-根据网格线写

.container {
  border: 1px solid #000;
  height:50vh;
  display: grid;
  grid: 50px auto 50px / 10% auto 10%;
}

.header {
  background-color: pink;
  grid-column: 1 / 4; // 也可写成 1 / span 3
  grid-row: 1;
}

.main {
  background-color: blue;
  grid-column: 2;
  grid-row: 2;
}
.aside{
  background-color: yellow;
  grid-column: 3;
  grid-row: 2;
}
.footer{
  background-color: red;
  grid-column: 1 / 4;
  grid-row: 3;
}

这个写法比较简单，但并不容易理解。

• grid: 50px auto 50px / 10% auto 10%;定义了row和column长度
• 子项中grid-column和grid-row后面的的数字指的是第几根网格线，类似于坐标。grid-column: 1 / 4指的是占用第一根竖线到最后一根竖线间所有，也可写成grid-column: 1 / span 3，指的是从第一根竖线起横跨3格。

总结

这三种写法只是grid布局入门，grid布局中还涉及到很多属性，需要看文档或者教程进一步理解记忆和运用。而grid布局中的子项的一些属性（比如居中等）和flex中的类似，学好flex布局也能很好上手grid布局。