grid圣杯布局,三种方式布局

圣杯布局是最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

效果：

html:

<div class="container">
	<header><h1 contenteditable>Header.com</h1></header>
	<div class="left-sidebar" contenteditable>Left Sidebar</div>
	<main contenteditable></main>
	<div class="right-sidebar" contenteditable>Right Sidebar</div>
	<footer contenteditable>Footer Content — Header.com 2020</footer>
</div>

css:

.container {
	height: 100vh;
}


header {
  background: lightpink;
  padding: 2rem;
}

.left-sidebar {
  background: lightblue;
}

main {
  background: coral;
}

.right-sidebar {
  background: yellow;
}

footer {
  background: wheat;
  padding: 2rem;
  text-align: center;
}

.left-sidebar,
.right-sidebar {
  padding: 1rem;
}

布局看到html可以了解到三行三列布局,头尾一行显示.

第一种实现方式:

用的是网格线分隔

简写

grid-template: <grid-template-rows> / <grid-template-columns>

.container {
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto;
}
header{
    grid-column: 1 / 4;
}
.left-sidebar{
    grid-column: 1 / 2;
}
main{
    grid-column: 2 / 3;
}
.right-sidebar{
    grid-column: 3 / 4;
}
footer{
    grid-column: 1 / 4;
}

第二种实现方式:

用的是网格块命名法

.container {
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto;
	grid-template-areas: "header header header"
			"leftSide main rightSide"
			"footer footer footer";
}
header{
    grid-area: header;
}
.left-sidebar{
    grid-area: leftSide;
}
main{
    grid-area: main;
}
.right-sidebar{
    grid-area: rightSide;
}
footer{
    grid-area: footer;
}

第三种实现方式:

用的是网格块合并法,span 3,表格列合并三列.

.container {
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto;
}
header{
    grid-column: span 3;
}
footer{
    grid-column: span 3;
}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/688

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！