Grid写圣杯布局就是这么简单...

weixin_48920122

于 2020-12-21 22:01:50 发布

阅读量435

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_48920122/article/details/111500815

版权

本文介绍了一种使用CSS Grid实现的圣杯布局方法，详细解释了如何通过定义grid-template-columns和grid-template-areas属性来创建包含头部、中部、左右侧边栏及底部的响应式网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Grid圣杯布局HTML

<div class="grid core">
	<header>header</header>
	<div class="mid"> mid </div>
	<div class="left"> left </div>
	<div class="right"> right </div>
	<footer>footer</footer>
</div>

Grid圣杯布局css样式

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-areas:
    "a a a"
    "b c d"
    "e e e";
  color: white;
  text-align: center;
}

.grid * {
  text-align: center;
}

.grid div {
  height: 300px;
  margin: 2px;
  background-color: #e91d62;
}

header {
  height: 60px;
  background-color: gray;
  grid-area: a;
}

.grid .left {
  grid-area: b;
}

.grid .mid {
  grid-area: c;
}

.grid .right {
  grid-area: d;
}

footer {
  height: 60px;
  background-color: gray;
  grid-area: e;
}
.core{
	width: 1000px;
	margin: 0 auto;
}

在这里插入图片描述