Notas de estudio: diseño flexible para lograr un diseño dividido equitativamente de dos filas y cuatro columnas

Durante el proceso de revelado, a veces se le pedirá que coloque varias imágenes en formato 2X2 o 3X3. Se requiere que los espacios entre la parte superior e inferior y la izquierda y la derecha de dos imágenes adyacentes sean iguales.

---

一 .padding-top / margin-top, padding-bottom / margin-bottom

1. Código:

<div class="page-container">
    <div class="layout-wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
        <div class="item margin"></div>
    </div>
</div>

* { padding: 0; margin: 0; }
.page-container {
    width: 100%;
    height: 100vw;
    background-color: #F5F5F5;
}
.layout-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item {
    flex-shrink: 0;
    width: 24.1%;
    height: 200px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
.item.margin { margin-top: 1.2%; }

2. Imagen de efecto:

3. Puntos clave:

Cuando los valores de padding-top, padding-bottom.margin-top, margin-bottom se establecen como porcentajes, el resultado del cálculo se basa en el ancho del elemento principal.

El conocimiento anterior se utiliza principalmente aquí.

 2. Diseño de cuadrícula

1. Código:

<div class="page-container">
    <div class="layout-wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

* { padding: 0; margin: 0; }
.page-container {
    width: 100%;
    height: 100vw;
    background-color: #F5F5F5;
}
.layout-wrapper {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 200px 200px;
    grid-gap: 12px;
}
.item {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}

 2. Imagen de efecto:

3. Puntos clave:

El diseño de cuadrícula puede implementar fácilmente muchos diseños de página complejos. Muy practico

---

En la edición de páginas web, este efecto se usa más comúnmente. Por supuesto, también se pueden utilizar otros métodos para lograr el mismo efecto.