Te recomiendo utilizar CSS Grid, es perfectamente dirigido a este tipo de diseños; y no requieres mucho codigo CSS, de igual manera es altamanete ajustable de modo que puedes modificarlo a como mejor te parezca.
Simplemente necesitas un contenedor principal al cual aplicas la propiedad display: grid
, con esto todos los elementos hijos se comportaran como grid-items
y puedes aplicarle las propiedades que necesites para tu cuadricula.
grid-template-columns
: Cantidad de columnas
grid-auto-rows
: Tamaño de las filas
grid-gap
: Espacio entre elementos de la cuadricula
Existen muchas mas propiedades que puedes utilizar para modificar el diseño, aqui te dejo una guía para que te familiarices mejor con CSS Grid:
https://www.adictosaltrabajo.com/2018/01/30/maquetacion-con-css-grid/
https://css-tricks.com/snippets/css/complete-guide-grid/
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto);
grid-gap: 15px;
}
.grid-item {
border: 1px solid black;
}
<div class="grid">
<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>
Ejemplo con contenido:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, 80px);
grid-gap: 15px;
}
.grid-item {
border: 1px solid black;
overflow: hidden;
}
.grid-item img,
.grid-item p,
.grid-item h1 {
margin: 0;
}
.container {
display: flex;
}
.container img {
max-width: 50%;
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
</p>
</div>
<div class="grid-item">
<h1>Un titulo grande</h1>
</div>
<div class="grid-item"></div>
<div class="grid-item">
<img src="https://via.placeholder.com/150" />
</div>
<div class="grid-item"></div>
<div class="grid-item">
<div class="container">
<img src="https://via.placeholder.com/450" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
</p>
</div>
</div>
<div class="grid-item"></div>
<div class="grid-item">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
</p>
</div>
</div>
"se me muestran un div abajo del otro"
es por el display que tiene por default el tagdiv
, que hace en modo que se vizualize en bloque (ocupa toda la linea/ancho) para que esten uno al lado del otro tendrias que usar en cssdiv { display:inline-block }
y ajustarlo a tu gusto conwidth
yheight
[aca][w3schools.com/html/default.asp] vas a encontrar puntos interesantes para mejorar, ☺