探秘 CSS Grid 响应式布局

最新推荐文章于 2026-05-17 09:01:04 发布

原创最新推荐文章于 2026-05-17 09:01:04 发布 · 646 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#CSS Grid #响应式布局

收录于

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用 CSS Grid 实现响应式网页布局。通过定义网格容器、行和列的比例，以及不同屏幕尺寸下的区域分配，使得网页能在各种设备上自适应显示。示例中包括 header、menu、content 和 footer 的布局。

CSS Grid 是一种快速实现响应式布局的方法，它比传统的布局方法更吸引人。

创建CSS Grid (网格) 布局

1、 HTML结构

<div class="container">
  <div class="header">header</div>
  <div class="menu">menu</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

2、css结构

.container{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: 50px 350px 50px;
  grid-gap: 5px;
  grid-template-areas:
        ". h h h h h h h h h h ."
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}
@media screen and (max-width: 640px) {
    .container {
        grid-template-areas:
            "m m m m m m h h h h h h"
            "c c c c c c c c c c c c"
            "f f f f f f f f f f f f";
    }
}
.header {
    grid-area: h;
    background:red;
}
.menu {
    grid-area: m;
    background:blue;
}
.content {
    grid-area: c;
    background:yellow;
}
.footer {
   grid-area: f;
  background:green;
}