[分享]css写一个9宫格

在前端开发中，经常需要使用九宫格来展示图片或内容。今天我们就来学习一下如何使用CSS来实现一个简单的九宫格。 .grid { display: grid; gridgap: 10px; gridtem...

在前端开发中，经常需要使用九宫格来展示图片或内容。今天我们就来学习一下如何使用CSS来实现一个简单的九宫格。

  .grid {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    .grid-item {
      background-color: #eee;
      text-align: center;
    } 

如上代码，我们首先定义一个.grid类，用来表示九宫格的整体布局。其中，display: grid表示使用CSS Grid布局。grid-gap: 10px表示每个格子之间的间距为10px。grid-template-columns: repeat(3, 1fr)表示九宫格有3列，每列宽度为1fr。grid-template-rows: repeat(3, 1fr)表示九宫格有3行，每行高度为1fr。

接着，我们定义一个.grid-item类，用来表示单个格子的样式。其中，background-color: #eee用来设置背景颜色为灰色。text-align: center用来使格子中的内容居中显示。

使用以上代码，我们就可以创建一个简单的九宫格。如需在格子中添加图片或文本内容，可以在相应的.grid-item元素中添加内容即可。