Una de las características más importantes de CSS Grid es que podemos crear un diseño receptivo sin usar una consulta de medios. No necesitamos escribir una consulta de medios para cada ventana gráfica, sino que se puede ajustar usando algunas de las propiedades de CSS-Grid. Se puede ajustar simplemente usando la propiedad grid-template-columns , la función repeat() junto con las palabras clave de autoajuste y autocompletado.
Requisitos previos:
1. Autocompletar: la propiedad de autocompletar llena las filas con tantas columnas como sea posible. La columna recién agregada puede estar vacía pero aún ocupará un espacio en la fila dada. Es una propiedad importante en la cuadrícula CSS que crea un diseño receptivo sin escribir una consulta de medios para cada cuadrícula.
Sintaxis:
:auto-fill
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.item1 {
background-color: aqua;
border: 1px solid black;
border-radius: 3px;
max-width: 100%;
min-height: 250px;
height: auto;
}
.item2 {
background-color: pink;
border: 1px solid black;
max-width: 100%;
border-radius: 3px;
min-height: 250px;
height: auto;
}
.set {
text-align: center;
margin-top: 10%;
}
.item3 {
background-color: green;
border: 1px solid black;
max-width: 100%;
border-radius: 3px;
min-height: 250px;
height: auto;
}
.item4 {
background-color: springgreen;
border: 1px solid black;
border-radius: 3px;
max-width: 100%;
min-height: 250px;
height: auto;
}
body {
height: 100vh;
place-items: center;
padding: 100px 0;
}
.autofill {
width: 90vw;
margin-top: 4%;
border-radius: 3px;
border: 1px solid rgb(22, 3, 3);
display: grid;
/* Use display property as grid*/
gap: 5px;
grid-template-columns: repeat(
auto-fill, minmax(200px, 1fr));
}
</style>
</head>
<body>
<div class="autofill">
<div class="item1">
<h1 class="set">1</h1>
</div>
<div class="item2">
<h1 class="set">2</h1>
</div>
<div class="item3">
<h1 class="set">3</h1>
</div>
<div class="item4">
<h1 class="set">4</h1>
</div>
</div>
</body>
</html>
Producción:
propiedad de autocompletar fig-1
Como podemos ver en la figura (fig-1), el autocompletado se redimensiona automáticamente y deja el espacio disponible para la adición de nuevos elementos.
2. Ajuste automático: el ajuste automático se comporta igual que el relleno automático, pero la propiedad de ajuste automático llena el espacio disponible actualmente al expandir su tamaño para ocupar el espacio disponible según el ancho del dispositivo. Si todos los elementos de la cuadrícula están vacíos, se trata como una sola pista de tamaño 0px.
Con el fin de encontrar el número de pistas repetidas automáticamente, debemos mantener el tamaño de la pista en un valor específico (por ejemplo, 1 px), para evitar la división por cero.
Sintaxis:
:auto-fit
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.item1 {
background-color: aqua;
border: 1px solid black;
border-radius: 3px;
max-width: 100%;
min-height: 250px;
height: auto;
}
.item2 {
background-color: pink;
border: 1px solid black;
max-width: 100%;
border-radius: 3px;
min-height: 250px;
height: auto;
}
.set {
text-align: center;
margin-top: 10%;
}
.item3 {
background-color: green;
border: 1px solid black;
max-width: 100%;
border-radius: 3px;
min-height: 250px;
height: auto;
}
.item4 {
background-color: springgreen;
border: 1px solid black;
border-radius: 3px;
max-width: 100%;
min-height: 250px;
height: auto;
}
body {
height: 100vh;
place-items: center;
padding: 100px 0;
}
.auto-fit {
width: 90vw;
margin-top: 4%;
border-radius: 3px;
border: 1px solid rgb(22, 3, 3);
display: grid;
/* Use display property as grid*/
gap: 5px;
grid-template-columns: repeat(
auto-fit, minmax(200px, 1fr));
}
</style>
<title>Document</title>
</head>
<body>
<div class="auto-fit">
<div class="item1">
<h1 class="set">1</h1>
</div>
<div class="item2">
<h1 class="set">2</h1>
</div>
<div class="item3">
<h1 class="set">3</h1>
</div>
<div class="item4">
<h1 class="set">4</h1>
</div>
</div>
</body>
</html>
Producción:
propiedad de ajuste automático (fig-2)
La diferencia entre Autocompletar y Autoajuste se indica a continuación:
|
Autocompletar |
Ajuste automático |
| El navegador permitirá que las columnas vacías ocupen espacio en una fila. | El contenido se estirará para llenar todo el ancho de la fila. |
| El diseño de la cuadrícula permanece fijo con o sin elementos. | El diseño de la cuadrícula no es fijo, el contenido se estira para ajustarse a todo el ancho. |
| El cambio de elementos en una cuadrícula es posible ya que hay espacio libre en una fila. | El desplazamiento de elementos en una cuadrícula no es posible. |
Publicación traducida automáticamente
Artículo escrito por kashutosh727 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA