En este artículo, aprenderá a usar elementos de cuadrícula utilizando las reglas de ubicación automática de cuadrícula. Puede usar auto como valor de propiedad en la cuadrícula, ya que permite automáticamente que el contenedor personalice su tamaño en función del contenido de los elementos en la fila o las columnas.
Sintaxis:
grid-template-rows : auto grid-template-columns: auto
El valor de la propiedad:
- auto : el tamaño de las filas o columnas está determinado por el tamaño del contenedor y por el tamaño del contenido de los elementos de la fila o columna.
Ejemplo 1: Usar auto tanto para Fila como para Columna.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
h1{
color: green;
}
.main {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-gap: 5px;
background-color: green;
padding: 5px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GFG </h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">Welcome to GeeksforGeeks</div>
<div class="gfg">Complete Portal for Geeky</div>
<div class="gfg">Courses</div>
<div class="gfg">Data Structure and Algorithm</div>
<div class="gfg">Competitive Programming</div>
<div class="gfg">Operating System</div>
<div class="gfg">DBMS</div>
</div>
</center>
</body>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
h1{
color: green;
}
.main {
display: grid;
grid-template-columns: 400px 400px;
grid-template-rows: 60px auto 60px;
grid-gap: 5px;
background-color: green;
padding: 5px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeekdforGeeks</h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">Complete Portal for Geeky </div>
<div class="gfg">Courses</div>
<div class="gfg">Data Structure and Algorithm</div>
<div class="gfg">Competitive Programming,
If you are looking to conquer your coding skills,
we are here with our Competitive Programming Live Course.
</div>
<div class="gfg">Operating System</div>
<div class="gfg">DBMS, Database management system (DBMS) is a
collection of interrelated data and a set of
programs to access those data</div>
</div>
</center>
</body>
</html>
Producción:
En el ejemplo anterior, el tamaño de la fila 1 y 3 de la cuadrícula es fijo y el tamaño de la fila 2 es automático. Por lo tanto, el texto se desbordó desde la 3.ª fila debido al tamaño fijo, pero no sucedió en la 2.ª fila debido al valor de la propiedad automática.
Navegadores compatibles: El navegador compatible con CSS | grid auto Propiedad se enumeran a continuación:
- Google cromo 57
- MozillaFirefox 52
- Borde 16
- safari10
- Ópera 44
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA