[分享]css中怎么做五个格子

CSS中如何制作五个格子在前端网页设计中，经常需要用到格子布局。在CSS中使用div元素可以方便地实现，但是如何让五个等分的格子呢？本篇文章将介绍一种简单的实现方式。首先，我们需要在HTML中使用5个...

CSS中如何制作五个格子
在前端网页设计中，经常需要用到格子布局。在CSS中使用div元素可以方便地实现，但是如何让五个等分的格子呢？本篇文章将介绍一种简单的实现方式。
首先，我们需要在HTML中使用5个div元素作为格子的容器，为它们添加一个共同的类名，并在CSS中设置它们的样式：

<br> <br>
    <div class="grid"></div><br>
    <div class="grid"></div><br>
    <div class="grid"></div><br>
    <div class="grid"></div><br>
    <div class="grid"></div><br> 

<br> <br>
    .grid{<br>
      width: 20%;<br>
      height: 100px;<br>
      border: 1px solid black;<br>
      display: inline-block;<br>
    }<br> 

在上面的代码中，我们将.grid类设置宽度为20%，使其可以等分父容器的宽度。设置高度为100px，边框为1px黑色实线，以便于区分格子。同时，我们使用display:inline-block让其可以在同一行显示。
接下来，我们将第1、2、4、5个格子设置为白色，第3个格子设置为灰色，代码如下：

<br> <br>
    .grid:nth-child(3){<br>
      background-color: gray;<br>
    }<br>
    .grid:not(:nth-child(3)){<br>
      background-color: white;<br>
    }<br> 

在上面的代码中，我们使用了:nth-child() 和:not() 伪类来选中1、2、4、5和3这两组格子，并分别设置它们的背景色。
最后，我们设置一下父容器的宽度和高度，以使其包含所有的子元素：

<br> <br>
    .container{<br>
      width: 500px;<br>
      height: 100px;<br>
    }<br> 

最终的HTML代码如下：

<br> <br>
    <div class="container"><br>
      <div class="grid"></div><br>
      <div class="grid"></div><br>
      <div class="grid"></div><br>
      <div class="grid"></div><br>
      <div class="grid"></div><br>
    </div><br> 

最终的效果如下图所示：
以上就是制作五个等分格子的方法，希望对前端入门者有所帮助。