Número y ancho de columnas en CSS Grid
Comenzaremos nuestra introducción al trabajo con grid
asignando el número y el ancho de las columnas a lo largo de las cuales
se ubicarán los elementos secundarios.
Para este propósito utilizaremos la
propiedad grid-template-columns, que se especifica
en el elemento padre y define
el número y ancho de las columnas que
ocuparán los elementos hijos en el grid.
En el valor de la propiedad indicamos el ancho de las columnas
en píxeles.
Ejemplo
Primero creemos un elemento padre
y hagamos que sea un contenedor de grid.
Supongamos que tenemos un div que contiene
cuatro elementos secundarios. Establezcamos para él
en la propiedad display el valor grid,
y en la propiedad grid-template-columns
escribamos el ancho para dos columnas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora creemos una tabla con cuatro columnas de diferentes tamaños:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tareas prácticas
Supongamos que tienes un div con nueve elementos secundarios. Convierte el elemento padre en un contenedor de grid.
Ubica los elementos secundarios en dos
columnas de ancho 200px.
Ubica los elementos secundarios en tres
columnas de ancho 150px.
Ubica los elementos secundarios en tres
columnas: la primera de ancho 100px,
la segunda de 150px, y la tercera
de 200px.