【CSS】网格布局（简单布局、网格合并、网格嵌套）

最新推荐文章于 2025-06-06 13:11:11 发布

如果皮卡会coding

最新推荐文章于 2025-06-06 13:11:11 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习 # HTML与CSS 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/HYY_2000/article/details/132176615

文章目录

- CSS网格布局（Grid Layout）

CSS网格布局（Grid Layout）

CSS网格布局（Grid Layout）是一种强大且灵活的CSS布局系统，允许开发者以网格形式组织和定位HTML元素。网格布局可以帮助我们在一个容器中定义行（rows）和列（columns），然后将元素放置在这些网格中。这种布局方式比传统的基于浮动和定位的布局更直观和易于管理，特别适用于响应式设计和复杂的布局需求。

1. 简单布局

我们首先来看一个简单的网格布局示例。假设我们有一个容器，我们将其分为3列，每列的宽度平分剩余空间，然后在容器中放置一些网格项。

在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout - 简单布局</title>
  <style>
    .grid-container {
     
     
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
     
     
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>