La propiedad grid-area se utiliza para establecer el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula. La propiedad grid-area también se utiliza para establecer un nombre para un elemento de la cuadrícula.
Sintaxis:
grid-area: grid-row-start|grid-column-start|grid-row-end| grid-column-end|itemname;
Valores de propiedad:
- grid-row-start: Establece la fila en la que se muestra primero el elemento.
- grid-column-start: Establece la columna en la que se muestra primero el elemento.
- grid-row-end: especifica la línea de fila para dejar de mostrar el elemento o abarcar cuántas filas.
- grid-column-end: Establece el número de columnas a abarcar.
- itemname: Establece un nombre para el elemento de la cuadrícula.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-area Property
</title>
<style>
.item {
grid-area: Area;
}
.grid-container {
display: grid;
grid-template-areas: 'Area Area Area';
grid-gap: 30px;
background-color: green;
padding: 20px;
}
.GFG {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>The grid-area Property</h2>
<div class = "grid-container">
<div class = "GFG item">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
<div class = "GFG">6</div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-area property
</title>
<style>
.GFG1 {
grid-area: heading;
}
.GFG2 {
grid-area: margin;
}
.GFG3 {
grid-area: subtitle1;
}
.GFG4 {
grid-area: info;
}
.main {
display: grid;
grid-gap: 30px;
background-color: green;
padding: 20px;
grid-template-areas:
'margin heading heading heading heading heading '
'margin subtitle1 info info info info';
}
.GFG {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS grid-area Property</h2>
<div class = "main">
<div class = "GFG GFG1">Heading</div>
<div class = "GFG GFG2">Margin</div>
<div class = "GFG GFG3">Subtitle</div>
<div class = "GFG GFG4">info</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-area se enumeran a continuación:
- Google Chrome 57.0
- Borde 16.0
- MozillaFirefox 52.0
- Safari 10.1
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA