CSS-像Grid布局里面填元素-line-based 原创邦

CSS-像Grid布局里面填元素-line-based

基于线性位置放置元素

上下左右，四个方向。

针对grid里面的元素放在哪，有下面几个属性可设置。

grid-column：开始位置/结束位置
grid-row：开始位置/结束位置

These let you specify the start and end lines at once, separated by a / — a forward slash character.

看懂这个：

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

也可以用 -1表示end

一个知识点通过网格区域来定位，Positioning with grid-template-areas

An alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name.

grid-area：给元素所在区域命名。

grid-template-area:

.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

The rules for grid-template-areas are as follows:

You need to have every cell of the grid filled.
To span across two cells, repeat the name.
To leave a cell empty, use a . (period).
Areas must be rectangular — you can’t have an L-shaped area for example.
Areas can't be repeated in different locations.

阅读量: 621
发布于: 2021-08-03
修改于: 2021-08-03