Usando CSS Grid: Columnas

Una de las mas interesantes funciones de CSS es el poder crear grids, aca te explico como hacerlo facilmente:

Lo primero que se necesita es un div que funcione como placeholder para la grid, por ejemplo:

< div id="content">
 < div class="">1 </div>
 < div class="">2 </div>
 < div class="">3 </div>
 ...etc... 
</div>

Y ahora podemos declarar que vamos a usar ese div como un grid de esta forma:

 #content{
 max-width: 1110px;
display: grid;
}

Para indicarle cuantas columnas debe tener la grid, lo hacemos de esta forma:

#content{
 max-width: 1110px;
 margin: 0 auto;
 /*aqui se indica que esto va a ser un grid*/
 display: grid;
 /*aqui se ponen las columnas*/
 grid-template-columns: 33.3% 33.3% 33.3%;
 }

Otra forma de declarar columnas es mediante fractions, para que ocupen todo el espacio disponible dividido en las fracciones indicadas:

 grid-template-columns: 1fr 2fr 1fr;

Otra forma de declarar columnas es usando el método repeat() de esta forma:

 grid-template-columns: repeat(6,1fr);

Lo cual es idéntico a usar:

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s