Propiedad grid

La propiedad grid es una forma abreviada para establecer todas las propiedades de las columnas y filas del contenedor de grid. Todos los valores se escriben en una sola línea separados por una barra.

Mediante grid en una sola línea solo se puede describir un tipo de propiedades: explícitas (grid-template-rows, grid-template-columns, grid-template-areas) o implícitas (grid-auto-rows, grid-auto-columns, grid-auto-flow). Las propiedades que no se especifican toman sus valores por defecto.

Sintaxis

elemento {
	grid: propiedades de grid;
}

Ejemplo

Creemos una tabla usando la propiedad grid:

<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>9</div>
</div>

#parent {
	display: grid;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Y ahora establezcamos para la segunda y tercera fila el mismo ancho, y para cada columna - un ancho diferente:

<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>9</div>
</div>

#parent {
	display: grid;
	grid: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ejemplo

Y ahora en la tabla del ejemplo anterior hagamos que la fila superior tenga un ancho de dos fracciones, y la primera columna - de media fracción:

<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>9</div>
</div>

#parent {
	display: grid;
	grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Véase también

propiedad grid-template,
que establece el número y ancho de columnas y filas para un elemento
propiedad grid-template-rows,
que establece el número y ancho de las filas en un grid
propiedad grid-template-columns,
que establece el número y ancho de las columnas en un grid
propiedad grid-template-areas,
que establece la ubicación de los elementos en un grid
propiedad grid-auto-flow,
que establece la ubicación automática de los elementos en un grid