CSS Grid 实现的具有极简洁风格的单品网站布局-JavaScript中文网-JavaScript教程资源分享门户

前言

在网页设计中，布局一直是一个非常重要的环节。良好的布局可以让用户更加方便地使用网站，同时也可以提高网站的美观度。而在前端开发中，CSS Grid 是一种非常强大的布局方式，可以实现非常灵活的网页布局。本文将介绍如何使用 CSS Grid 实现具有极简洁风格的单品网站布局。

布局方案

我们要实现的布局是一个非常简单的单品网站，包含一个顶部导航栏、一个商品展示区和一个底部版权信息。

这个布局可以使用 CSS Grid 来实现。具体的方案是将整个页面分为三个区域，分别是顶部导航栏、商品展示区和底部版权信息。其中，顶部导航栏和底部版权信息只占用一行，商品展示区占用剩余的所有空间。具体的代码如下：

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

上面的代码定义了一个 .grid-container 的容器，其中包含了三个子元素，分别是 .header、.main 和 .footer。通过 grid-template-rows 和 grid-template-columns 属性定义了容器的行和列，通过 grid-template-areas 属性定义了子元素的布局。具体的效果可以看下面的示意图：

样式设计

接下来，我们需要对每个子元素进行样式设计，以实现具有极简洁风格的单品网站布局。

顶部导航栏

顶部导航栏包含了一个标题和一个菜单，我们可以使用 flex 布局来实现这个效果。具体的代码如下：

// javascriptcn.com 代码示例
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
}

.header ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header li {
  margin-left: 20px;
}

.header a {
  color: #333;
  text-decoration: none;
}

商品展示区

商品展示区包含了多个商品，我们可以使用 grid 布局来实现这个效果。具体的代码如下：

// javascriptcn.com 代码示例
.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.item h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px;
}

.item p {
  font-size: 14px;
  margin: 10px;
}

上面的代码定义了一个 .main 的容器，其中包含了多个 .item 子元素。通过 grid-template-columns 属性定义了容器的列，使用 repeat(auto-fit, minmax(220px, 1fr)) 可以让子元素自动换行，并且每个子元素的最小宽度为 220px，最大宽度为 1fr。通过 grid-gap 属性定义了子元素的间距。

底部版权信息

底部版权信息只包含了一个文本信息，我们可以使用 flex 布局来实现这个效果。具体的代码如下：

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 14px;
  color: #999;
}

完整代码

最终的代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid 实现的具有极简洁风格的单品网站布局</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "main"
          "footer";
      }

      .header {
        grid-area: header;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
      }

      .header h1 {
        font-size: 24px;
        font-weight: bold;
      }

      .header ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .header li {
        margin-left: 20px;
      }

      .header a {
        color: #333;
        text-decoration: none;
      }

      .main {
        grid-area: main;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        grid-gap: 20px;
        padding: 20px;
      }

      .item {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .item h2 {
        font-size: 18px;
        font-weight: bold;
        margin: 10px;
      }

      .item p {
        font-size: 14px;
        margin: 10px;
      }

      .footer {
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        font-size: 14px;
        color: #999;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="header">
        <h1>商品列表</h1>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">购物车</a></li>
          <li><a href="#">我的</a></li>
        </ul>
      </div>
      <div class="main">
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
        <div class="item">
          <img src="https://i.loli.net/2021/04/21/7W9yPpRcJbgvI1r.png" />
          <h2>商品名称</h2>
          <p>商品描述</p>
        </div>
      </div>
      <div class="footer">© 2021 单品网站</div>
    </div>
  </body>
</html>

总结

CSS Grid 是一种非常强大的布局方式，可以实现非常灵活的网页布局。本文介绍了如何使用 CSS Grid 实现具有极简洁风格的单品网站布局，包括布局方案和样式设计。希望本文对大家学习 CSS Grid 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6508f1e795b1f8cacd3bfe54