La propiedad de ajuste de contenido de CSS es una propiedad incorporada en CSS. Esta propiedad se usa para ajustar el tamaño según esta fórmula min(maximum size, max(minimum size, argument)) . La propiedad fit-content() utiliza una función definida para poner un límite al tamaño máximo de la división. Esta fórmula es muy útil cuando se trata de cuadrículas CSS. Sin embargo, debe tenerse en cuenta que fit-content() no es compatible con Internet Explorer en PC. Se pueden usar diferentes unidades CSS en esta fórmula. La función fit-content() acepta la longitud y el porcentaje como argumentos.
Sintaxis:
fit-content: length | percentage
Valores de propiedad:
- longitud: este valor de propiedad contiene la longitud fija.
Unidades: Longitudes absolutas- ajuste-contenido (8 cm)
- contenido de ajuste (12 mm)
- ajuste-contenido (8pc)
- ajuste-contenido (15px)
- ajuste-contenido (5 puntos)
- porcentaje: el valor de esta propiedad contiene la longitud relativa que depende del espacio disponible en el eje dado.
Unidades: Longitud relativa- ajuste-contenido (100%)
- ajuste-contenido (10em)
- ajuste-contenido(5rem)
- ajuste-contenido (2 canales)
El siguiente ejemplo ilustra la propiedad de ajuste de contenido de CSS:
Ejemplo: se puede ver que la página web está dividida en cuatro columnas de cuadrícula. El ancho máximo permitido de la primera, segunda y tercera división es de 150 px, 250 px y 350 px respectivamente, mientras que el ancho de la cuarta división se ha establecido en 1,5 fr. Esto significa que se ajustará según el ancho del dispositivo y el ancho que ocupen las otras tres divisiones.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>CSS | fit-content Property</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<style>
#container {
display: grid;
grid-template-columns: fit-content(150px)
fit-content(250px)
fit-content(350px) 1.5fr;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
width: 100%;
background-color: #563d7c;
padding: 8px;
}
</style>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<div id="container">
<div style="background-color: whitesmoke;
padding: 5px">
The smallest division of the grid.
Maximum width is clamped to 150px.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
This division's width will depend on
the content inside it. However, the
maximum width will be 250px.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
<strong>
Division with some more data, however,
the maximum permissible width will be 350px.
</strong>
<br>
<br>
Web design encompasses many different skills
and disciplines in the production and maintenance
of websites. The different areas of web design
include web graphic design; interface design;
authoring, including standardized code and
proprietary software; user experience design;
and search engine optimization.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
Flexible division, the width will change in
accordance with the screen size and the width
of the other three divisions.
</div>
</div>
</body>
</html>
Producción:
Explicación: Echemos un vistazo al ejemplo paso a paso.
- Paso 01: Diseño normal, el diseño normal de la página web. CSS Grid se utiliza con fines de demostración. CSS Grid ayuda a crear páginas web receptivas, ya que las divisiones de la cuadrícula se ajustan según el ancho de la pantalla.
- Paso 02: el ancho de la pantalla comienza a disminuir. La cuarta división ha comenzado a reducirse, sin embargo, la primera, segunda y tercera división no se ven afectadas.
- Paso 03: Ancho Mínimo, la tercera división es la que más se ha encogido. El contenido dentro de la primera y segunda división se ha ajustado de tal manera que no se desborde. La cuadrícula está respondiendo bien al cambio de ancho de pantalla.
- Paso 04: el ancho de la pantalla comienza a aumentar. Ahora se ha aumentado el ancho de la pantalla, y el ancho de todas las divisiones se ha incrementado en consecuencia. Sin embargo, se estableció un límite superior en el ancho de la primera, segunda y tercera divisiones y, por lo tanto, después de limitar ese límite de umbral, se fijarán. La cuarta división, sin embargo, seguirá expandiéndose.
- Paso 05: De vuelta al diseño normal, la cuadrícula se ha restablecido al diseño normal.
De los pasos 02, 03 y 04 , se puede observar que una vez que el ancho de la pantalla comenzó a reducirse, la cuarta división fue la primera en reducirse. Una vez que el ancho comenzó a aumentar, todas las divisiones comenzaron a expandirse, sin embargo, la primera división dejó de expandirse después de que el ancho fuera igual a 150 px, mientras que la segunda y la tercera se expandieron hasta alcanzar el ancho de 250 px y 350 px respectivamente. La cuarta división siguió expandiéndose. Esto se debe a que su ancho se estableció en 1,5 fr, lo que significa que su propio ancho dependerá del ancho de la pantalla y de las otras divisiones.
Navegador compatible:
- Google Chrome
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA