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:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#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:

html<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>

css#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