La propiedad grid-template-areas en CSS se usa para especificar el área dentro del diseño de cuadrícula. El área de cuadrícula nombrada se puede representar en la pantalla en función de la secuencia de valores de la propiedad grid-template-areas.
Sintaxis:
grid-template-areas: none|itemnames;
Valores de propiedad:
- ninguno: es el valor predeterminado y no contiene áreas con nombre de cuadrícula.
- itemnames: Es la secuencia de nombres de áreas de cuadrícula en forma de filas y columnas.
Nota:
- Cada nombre de área está separado por un espacio.
- Cada fila está contenida dentro de una comilla simple ‘ ‘.
- Solo hay un punto y coma al final de la declaración.
- El punto representa elementos sin nombres.
Ejemplo 1: este ejemplo muestra la propiedad grid-template-areas.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-template-areas Property
</title>
<style>
.GFG1 {
grid-area: area;
}
.geeks {
background-color:green;
padding:30px;
display: grid;
grid-template-areas: 'area area';
grid-gap: 20px;
}
.GFG {
background-color: white;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="geeks">
<div class="GFG GFG1">A</div>
<div class="GFG">B</div>
<div class="GFG">C</div>
<div class="GFG">D</div>
<div class="GFG">E</div>
<div class="GFG">F</div>
<div class="GFG">G</div>
<div class="GFG">H</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra la propiedad grid-template-areas.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-template-areas Property
</title>
<style>
.GFG1 {
grid-area: area;
}
.geeks {
background-color:green;
padding:30px;
display: grid;
grid-template-areas:
'area area . . .'
'area area . . .';
grid-gap: 20px;
}
.GFG {
background-color: white;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="geeks">
<div class="GFG GFG1">A</div>
<div class="GFG">B</div>
<div class="GFG">C</div>
<div class="GFG">D</div>
<div class="GFG">E</div>
<div class="GFG">F</div>
<div class="GFG">G</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-template-areas se enumeran a continuación:
- Google Chrome 57.0
- Borde 16.0
- Firefox 52.0
- Safari 10.1
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por AkibBalkhi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA