CSS Grid 布局实现全屏布局技巧教程-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备日益普及，全屏布局成为越来越受欢迎的设计趋势。CSS Grid 布局是一种强大的工具，可以快速简便地构建全屏布局。本文将介绍如何使用 CSS Grid 布局来实现全屏布局，包括基础概念、属性及实例代码。

基础概念

在开始之前，我们需要了解一些基本概念。CSS Grid 布局是一种二维网格（grid）布局系统，可以将一个容器（container）分割成行和列，从而创建出一个二维的布局。容器中的项目（item）可以放置在网格中的任意位置。

CSS Grid 布局中的两个主要组成部分是容器和项目。容器是一个带有 display: grid 属性的元素，它指定了要创建的网格的行和列。项目是容器中被放置在网格中的元素。

属性

CSS Grid 布局有许多属性可以用于控制网格和项目的位置和大小。下面是一些常用的属性：

grid-template-columns/grid-template-rows

grid-template-columns 和 grid-template-rows 属性用于定义网格的列和行。它们可以使用多个值，每个值都代表一个网格轨道（grid track）。网格轨道可以是一个固定的长度、一个百分比值，也可以是一个 fr 单位，该单位代表剩余空间的比例。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 50px 100px;
}

上述代码创建了一个含有三列、两行的 6 个网格单元格的网格。第一行高度为 50 像素，第二行高度为 100 像素。第一列和第三列宽度为剩余空间的 1 / 4，第二列宽度为剩余空间的 2 / 4。

grid-column/grid-row

grid-column 和 grid-row 属性用于定义项目在网格中的位置。它们的值可以是一个数字来表示项目所处的网格线位置，也可以是 span 关键字，表示项目跨越多个网格单元格。

.item {
  grid-column: 2 / 4;
  grid-row: 1;
}

该示例代码定义了一个项目，它跨越第二列和第三列，位于第一行。

grid-gap

grid-gap 属性用于定义网格行和列之间的间距。它可以设置一个值，左右间距和上下间距默认相同，也可以分别设置水平和垂直间距。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 50px 100px;
  grid-gap: 10px;
}

上述代码创建了一个含有两列、两行的 4 个网格单元格的网格。每个单元格之间有 10 像素的间距。

实例代码

下面我们来看一个例子，如何用 CSS Grid 布局实现全屏布局。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Full Screen Layout with CSS Grid</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50px 1fr 50px;
        height: 100vh;
      }
      
      .header {
        background-color: #333;
        grid-column: 1 / 4;
        grid-row: 1;
      }
      
      .content {
        background-color: #ccc;
        grid-column: 1 / 4;
        grid-row: 2;
      }
      
      .footer {
        background-color: #333;
        grid-column: 1 / 4;
        grid-row: 3;
      }
      
      .left-sidebar {
        background-color: #999;
        grid-column: 1;
        grid-row: 2;
      }
      
      .right-sidebar {
        background-color: #999;
        grid-column: 3;
        grid-row: 2;
      }
      
      @media (max-width: 600px) {
        .container {
          grid-template-columns: 1fr;
          grid-template-rows: 50px 1fr 50px;
        }
        
        .header, .footer {
          grid-column: 1 / 2;
        }
        
        .content {
          grid-column: 1 / 2;
        }
        
        .left-sidebar, .right-sidebar {
          grid-row: 3;
        }
        
        .left-sidebar {
          grid-column: 1;
        }
        
        .right-sidebar {
          grid-column: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">Header</header>
      <div class="content">Content</div>
      <footer class="footer">Footer</footer>
      <aside class="left-sidebar">Left Sidebar</aside>
      <aside class="right-sidebar">Right Sidebar</aside>
    </div>
  </body>
</html>

在上述代码中，我们使用了一个 container 容器，并在其中放置了一个头部、主体、尾部和两个侧边栏。在大屏幕设备上，容器被分成三列，中央部分占用 1 / 3 宽度，侧边栏占用剩余宽度的 1 / 6。

在小屏幕设备上，我们使用媒体查询将容器的列数设置为 1，使其在移动设备上呈现出简洁的单列布局。

总结

CSS Grid 布局是实现全屏布局的强大工具，它可以快速简便地创建二维的网格布局。通过了解基本概念和属性，并参照上述实例代码，您可以轻松地实现全屏布局。如果您想深入学习 CSS Grid 布局，可以查看官方文档和其他相关资料。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65334ba77d4982a6eb6ceab0