十个现代布局ð[第2部分]-DEV365 开发者社区

这是“十个现代布局”的第二部分
If you aren't read the part 1, here you can read it.

＃4煎饼堆栈：网格 - 板条排：自动1FR自动

此布局通常用于网站和应用程序。

html

<div class="parent">
      <header class="blue section" contenteditable>Header</header>
      <main class="coral section" contenteditable>Main</main>
      <footer class="purple section" contenteditable>Footer</footer>
</div>

CSS

 .parent {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
header {
  background: rgb(235, 108, 127);
  padding: 2rem;
  text-align: center;
}

main {
  background: lightgreen;
  padding: 2rem;
  text-align: center;
}

footer {
  background: rgb(14, 202, 202);
  padding: 2rem;
  text-align: center;
}

＃5经典圣杯布局：网格 - 板：自动1FR AUTO / AUTO 1FR AUTO

它类似于以前的布局，但现在有侧栏
html

 <header class="pink section">Header</header>
      <div class="left-side blue section" contenteditable>Left Sidebar</div>
      <main class="section coral" contenteditable>Main</main>
      <div class="right-side yellow section" contenteditable>Right Sidebar</div>
      <footer class="green section">Footer</footer>

CSS

.parent {
  display: grid;
  height: 100vh;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  background: plum;
  grid-column: 1 / 4;
}

.left-side {
  padding: 2rem;
  background: purple;
  grid-column: 1 / 2;
}

main {
  padding: 2rem;
  background: paleturquoise;
  grid-column: 2 / 3;
}

.right-side {
  padding: 2rem;
  background: papayawhip;
  grid-column: 3 / 4;
}

footer {
  padding: 2rem;
  background: palegreen;
  grid-column: 1 / 4;
}

＃6 12跨度网格：网格 - 板块柱：重复（12，1fr）

我们列表中的下一个项目是永恒的最爱：12列网格。您可以使用重复（）函数轻松地在CSS中创建网格。通过将重复（12，1fr）指定为网格模板列，您将获得12个相等的宽列，每个列每个占用可用空间的1个分数。
html

 <div class="parent">
      <div class="span-12">Span 12</div>
      <div class="span-6">Span 6</div>
      <div class="span-4">Span 4</div>
      <div class="span-2">Span 2</div>
    </div>

CSS

.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
}
.span-12 {
  background: lightpink;
  grid-column: 1 / 13;
}

.span-6 {
  background: lightblue;
  grid-column: 1 / 7;
}

.span-4 {
  background: coral;
  grid-column: 4 / 9;
}

.span-2 {
  background: yellow;
  grid-column: 3 / 5;
}