css中的grid布局基础

基础用法

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义三列 */
  grid-template-rows: 100px 100px 100px; /* 定义三行 */
  gap: 10px; /* 列和行之间的间距 */
}

通过设置grid-template-columns和grid-template-rows可以分别定义列和行的分布；

通过使用repeat函数能简化

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 自动创建三列，每列平均占据剩余空间 */
  grid-template-rows: repeat(2, 150px); /* 自动创建两行，每行高度为150px */
  gap: 10px; /* 列和行之间的间距 */
}

1fr是可以理解成一份

使用@media实现响应式布局

.container {
  display: grid;
  grid-template-columns: 1fr; /* 一个自动调整宽度的列 */
  grid-template-rows: repeat(3, 100px); /* 三行高度为100px */
  gap: 10px; /* 列和行之间的间距 */
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 在视口宽度大于600px时，变为两列布局 */
  }
}

命名网格线的写法

.container {
  display: grid;
  grid-template-columns: [col1] 100px [col2] 100px [col3] 100px [col4]; /* 命名网格线 */
  grid-template-rows: [row1] 100px [row2] 100px [row3]; /* 命名网格线 */
  gap: 10px; /* 列和行之间的间距 */
}

使用网格线的名字，我们能更好的控制需要的调整

自动调整大小

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动调整列的数量，并限制每列的最小和最大宽度 */
  gap: 10px; /* 列和行之间的间距 */
}