0
305
Views¿Cómo hacer una cuadrícula de diamantes de 7 elementos con cuadrícula CSS?
¿Cómo puedo replicar lo siguiente usando CSS Grid?
Hasta ahora tengo lo siguiente:
.parent{ display: grid; gap: 1.5em; grid-template-columns: repeat(3, 1fr); }Pero esto deja la primera columna con 3 artículos (no deseados)...
Además, ¿cómo podría uno align-items: center; la primera y última columna para dar ese efecto de diamond ?
2 answers
Answer question0
Puede usar un código simplificado como el siguiente:
.box{ background: #123456; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; gap:15px; } .box:last-child { grid-column:2; } .box:nth-child(1), .box:nth-child(3), .box:nth-child(4), .box:nth-child(6) { transform:translateY(50%); } <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>0
Primero debe establecer la clase/id para cada cuadro que desee tener, luego simplemente establezca los valores de inicio y fin para las columnas y filas de cada cuadro.
El truco que utilicé, para obtener el resultado deseado, es que no opté por 3 filas, sino por 6. Mientras que la columna central ha tomado todas las filas, las columnas izquierda y derecha tienen la primera y la última fila vacías.
Ejemplo en codepen: https://codepen.io/FITDaniel/pen/abVawrw
.box{ background: #123456; margin: 15px; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 50px); } .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; } .box2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 6; } .box3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .box4 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; } .box5 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 7; } .box6 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; } .box7 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 4; grid-row-end: 6; } <div class="wrapper"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="box3 box"></div> <div class="box4 box"></div> <div class="box5 box"></div> <div class="box6 box"></div> <div class="box7 box"></div> </div>