Cómo HACER - Diseño de columna mixta
Aprenda a crear una cuadrícula de diseño de columnas mixtas con CSS.
Aprenda a crear un diseño de columna receptivo que varía entre 4 columnas, 2 columnas y columnas de ancho completo según el ancho de la pantalla.
Cambie el tamaño de la ventana del navegador para ver el efecto de respuesta:
Cómo crear un diseño de columna mixto
Paso 1) Agregar HTML:
Ejemplo
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Paso 2) Agregar CSS:
En este ejemplo, crearemos un diseño de cuatro columnas que se transformará en dos columnas en pantallas de menos de 900 px de ancho. Sin embargo, en pantallas que tienen menos de 600 px de ancho, las columnas se apilarán una encima de la otra en lugar de flotar una al lado de la otra.
Ejemplo
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Sugerencia: vaya a nuestro tutorial de diseño de sitios web CSS para obtener más información sobre los diseños de sitios web.
Sugerencia: vaya a nuestro tutorial de diseño web receptivo CSS para obtener más información sobre cuadrículas y diseño web receptivo.