9宫格排列 css3

九宫格排列是一种常见的布局方式，通常用于展示图片、产品或者文章列表，实现九宫格排列通常使用CSS3来实现，下面介绍如何使用CSS3实现九宫格排列。首先，在HTML代码中需要设置一个容器div，用来包裹九宫格排列中的所有元素，代码如下：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

上面代码中，class为grid-container是包裹所有子元素的容器，class为grid-item则是每个元素的类名，其中可以灵活的设置不同样式，如颜色、背景图片等。接下来，在CSS样式表中设置九宫格排列样式，代码如下：

9宫格排列 css3

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-gap: 10px;
}

.grid-item {
  border: 1px solid #ddd;
  padding: 20px;
}

上面代码中，grid-template-columns用来设置每个子元素的宽度，repeat(3,1fr))代表每一行有三个元素，宽度自适应。grid-gap用来设置子元素之间的空隙大小。最后，将HTML代码和CSS样式表一起引入HTML页面中即可实现九宫格排列的布局。总结来说，使用CSS3实现九宫格排列的方法简单且可灵活设置每一个子元素的样式，适合用于展示图片、产品或者文章列表等场景。

相关推荐