Css display:grid 网格布局

最新推荐文章于 2025-07-10 16:57:56 发布

原创

最新推荐文章于 2025-07-10 16:57:56 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css布局方式

本文介绍了CSS Grid布局的基本使用，通过`display:grid`实现网格布局，并讲解了`grid-template-columns/rows`、`grid-gap`等关键属性。此外，还探讨了浏览器支持情况，包括Chrome、Firefox、Edge等，并强调了理解如`justify-items`、`align-items`等重要术语对布局设计的重要性。

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

1.网格布局可以说是非常简单，给要网格布局的元素加上display:grid; 直接看下代码

.disgrid{
  display:grid;
  width: 40%;
  background: #4678fa;
  grid-template-columns:auto auto auto;/* 表示三列 */
  grid-template-rows:auto auto auto;
  grid-gap: 10px;
  margin-bottom: 10px;
}


<div class="disgrid">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
  </div>
</div>

直接给要网格布局的元素加上 display:grid;

看到css,---

grid-template-columns:auto auto auto;/* 表示三列 */
grid-template-rows:auto auto auto;/* 表示三行 */

更多的属性可以多多试试