Cómo crear: diseño de columnas mixtas
- Página anterior Vista de cuadrícula de lista
- Página siguiente Tarjeta de columna
Aprende a crear una cuadrícula de diseño de columnas mixtas usando CSS.
Aprende a crear un diseño de columnas responsivas que puede cambiar entre cuatro columnas, dos columnas y columnas de ancho completo según el ancho de la pantalla.
Ajusta el tamaño de la ventana del navegador para ver los efectos responsivos:
Cómo crear un diseño de columnas mixtas
Primer paso - Añadir HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
Segundo paso - Añadir CSS:
En este ejemplo, crearemos un diseño de cuatro columnas que se convertirá en dos columnas cuando la anchura de la pantalla sea menor de 900 píxeles. Sin embargo, cuando la anchura de la pantalla sea menor de 600 píxeles, las columnas se apilarán en lugar de estar alineadas.
/* Crear cuatro columnas iguales, flotando juntas */
.column {
float: left;
width: 25%;
}
/* Eliminar flotación */
.row:after {
content: "";
display: table;
clear: both;
}
/* Diseño responsive - cambia el diseño de cuatro columnas a dos columnas */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Diseño responsive - hace que las dos columnas se apilen en lugar de estar alineadas */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Páginas relacionadas
Tutoriales:Diseño de sitio web CSS
Tutoriales:Diseño web responsivo CSS
- Página anterior Vista de cuadrícula de lista
- Página siguiente Tarjeta de columna
