Grid es un patrón de diseño 2D (bidimensional) para manejar interfaces de usuario basadas en cuadrículas en la web. Describe la cantidad de propiedades que permiten diseñar estructuras de cuadrícula y controlar la ubicación de los elementos de la cuadrícula utilizando CSS. Puede cambiar el diseño de los elementos de la cuadrícula independientemente de su orden de origen, lo que permite mover los elementos de la cuadrícula para adaptarse a estos contextos variables sin tener que modificar el marcado subyacente.
Sintaxis:
grid-column: grid-column-start|grid-column-end;
Valores de propiedad: la propiedad grid-column-start y grid-column-end se puede describir de tres maneras:
- auto: el elemento se colocará en el flujo predeterminado. Es el valor por defecto.
- span n: especifica el número de columnas que abarcará el elemento en grid-column-start y grid-column-end en ambos casos.
- column-line: describe en qué columna comenzar y mostrar el elemento en el caso de grid-column-start y columna en la que finalizará la visualización del elemento para grid-column-end.
Ejemplo: Este ejemplo describe la propiedad grid-column: auto .
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid column Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 32px;
background-color: white;
padding: 20px 0;
}
.Geeks1 {
grid-column: 1 / auto;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Geeks1 GFG">1</div>
<div class = "Geeks2 GFG">2</div>
<div class = "Geeks3 GFG">3</div>
<div class = "Geeks4 GFG">4</div>
<div class = "Geeks5 GFG">5</div>
</div>
</body>
</html>
Producción:
Ejemplo: Este ejemplo describe la propiedad grid-column: column-line .
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid column Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 32px;
background-color: white;
padding: 20px 0;
}
.Geeks1 {
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Geeks1 GFG">1</div>
<div class = "Geeks2 GFG">2</div>
<div class = "Geeks3 GFG">3</div>
<div class = "Geeks4 GFG">4</div>
<div class = "Geeks5 GFG">5</div>
</div>
</body>
</html>
Producción:
Ejemplo: Este ejemplo describe la propiedad grid-column: span n .
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid column Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
background-color: green;
}
.GFG {
text-align: center;
font-size: 32px;
background-color: white;
padding: 20px 0;
}
.Geeks1 {
grid-column: 1 / span 3;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Geeks1 GFG">1</div>
<div class = "Geeks2 GFG">2</div>
<div class = "Geeks3 GFG">3</div>
<div class = "Geeks4 GFG">4</div>
<div class = "Geeks5 GFG">5</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-column se enumeran a continuación:
- Google Chrome 57.0
- Internet Explorer 16.0
- mozilla firefox 52.0
- Safari 10.0
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA