CSS 布局 网格布局

基本网站布局使用grid 。

HTML

<div class="grid-layout">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    Content
    <br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="footer">Footer</div>
</div>

CSS

.grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'sidebar header header'
    'sidebar content content'
    'sidebar footer  footer';
  color: white;
}
.grid-layout > div {
  background: #333;
  padding: 10px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

说明

1. display: grid 启用网格。
2. grid-gap: 10px 定义元素之间的间距。
3. grid-template-columns: repeat(3, 1fr) 定义3列大小相同。
4. grid-template-areas 定义网格区域的名称。
5. grid-area: sidebar 使元素使用名称为的区域sidebar 。