看完必会的grid布局----grid-template-areas

^^为欢几何^^

已于 2024-08-19 12:27:12 修改

阅读量191

点赞数

文章标签： html5 css

于 2023-09-11 18:02:31 首次发布

本文链接：https://blog.csdn.net/qq_52526079/article/details/132814534

版权

本文通过实例详细介绍了如何使用CSS Grid布局中的grid-template-areas属性来定义网格区域，实现高效灵活的页面布局。示例中创建了一个包含头部、侧边栏、主要内容及底部的简单网页布局。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
          display: grid;
          grid-template-areas:
            "header header header"
            "sidebar content content"
            "footer footer footer";
          grid-gap: 10px;
        }
    
        .grid-item {
          padding: 100px;
          text-align: center;
        }
    
        .header {
          grid-area: header;
          background-color: pink;
        }
    
        .sidebar {
          grid-area: sidebar;
          background-color: rgb(212, 246, 162);
        }
    
        .content {
          grid-area: content;
          background-color: rgb(195, 171, 126);
        }
    
        .footer {
          grid-area: footer;
          background-color: rgb(232, 187, 105);
        }
      </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item content">Content</div>
        <div class="grid-item footer">Footer</div>
      </div>
</body>

</html>