CSS之grid栅格布局介绍及布局总结

grid栅格系统布局

• 模拟12列栅格布局代码：http://www.nflinetech.com/0414/demo1.html

• css代码演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  /* 水平垂直居中 */
  justify-content: center;
  align-items: center;
  /* 可视窗口 */
  max-width: 100vw;
  min-height: 100vh;
}
.contert {
  min-width: 1000px;
  display: grid;
  gap: 5px;
}
.contert > .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  min-height: 50px;
}
.contert > .row > .item {
  background-color: aquamarine;
  padding: 10px;
  border: 1px solid;
}
/* 常用网格列样式 */
.col-1 {
  grid-column-end: span 1;
}
.col-2 {
  grid-column-end: span 2;
}
.col-3 {
  grid-column-end: span 3;
}
.col-4 {
  grid-column-end: span 4;
}
.col-5 {
  grid-column-end: span 5;
}
.col-6 {
  grid-column-end: span 6;
}
.col-7 {
  grid-column-end: span 7;
}
.col-8 {
  grid-column-end: span 8;
}
.col-9 {
  grid-column-end: span 9;
}
.col-10 {
  grid-column-end: span 10;
}
.col-11 {
  grid-column-end: span 11;
}
.col-12 {
  grid-column-end: span 12;
}

• 使用栅格布局实现三列布局代码：http://www.nflinetech.com/0414/demo2.html

• 简易网络相册代码：http://www.nflinetech.com/0414/demo3.html

---

个人总结：

• 通过今天自己收敲模拟12列栅格布局，我突然发现好像打开了新世界的大门一样，这样先提前设置好然后直接在页面中使用感觉真的是太方便太快捷了吧，做出一个三列布局，直接引用，基本上写一点代码整个大体的布局就出来了，这真的是太快了吧，让我有点吃惊。同时在吃惊的同时也感觉到了代码的魅力，这样的速度真的是让我眼前一亮，回想起之前用flex布局写一个这样的三列布局，虽然说也不是特别困难，但是相对于这个grid布局来说，那真的是一个天上一个地下，完全没法比较的，同时也让我更加坚定的要将这个布局牢牢的掌握在自己的手里。

• 在加上老师今天对于整个项目的布局讲解，也是让我醍醐灌顶，以前我对于写项目的时候有点不知道怎么下手不说，同时耶斯直接写页面的，慢慢写然后慢慢改，也没有就是说写文档的习惯，但是今天老师讲了之后才知道这个步骤是多么的重要，是写代码的第一步，而以前的我从来没有这样做过，所以就造成了我每次写页面的时候感觉晕头转向，不知道从哪里下手不说，写多了有时候都不知道自己之前写的代码在什么位置，改都不好修改，这次学习之后，真的要养成写项目之前将整体的布局先写进一个文档，让自己有一个大体的思路，这样项目写起来才会更加的迅捷与失误的几率变少。

• 还有对于flex 与 grid 两者之间布局相联系，老师画的两张图让我有了更加深刻的感受。

• flex： 项目 —-> 容器（是一个超大的单元格集合/网格区域）

• grid: 项目 —-> 单元格 —-> 容器

• 正是这样的一个图让我更加直观的了解到了两者之间的区别与交互使用，整体的布局使用grid布局，而单行内的则使用flex布局，两个交互使用，对于布局来说更加的方便，处理起来也更加的容易。