CSS Grid Layout

Posted on 2020-12-30 10:00 in Web

Grid 布局

Grid 布局是比 Flex 布局更强大的布局

教程：

CSS Grid 网格布局教程

MDN CSS 网格布局

常见用法

单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

行和列的间距

grid-row-gap: 20px;
grid-column-gap: 20px;
grid-gap: 20px;

CSS trick

紧挨着的下一个邻节点, 加号表示

a.thumbnail:focus +div, a.thumbnail:hover +div {
    color: #ff7c08;
}

css