Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

¿De dónde venimos y en dónde estamos?

2

¿Cómo fue pensado CSS cuando se creó?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

¿Cómo se llegó al concepto de CSS Grid?

5

¿CSS Grid es una idea nueva? La evolución de la especificación

6

¿Qué significa Grid para CSS?

Control de alineamiento

7

Técnicas de alineamiento antes de CSS Grid: margin y line-height

8

Técnicas de alineamiento antes de CSS Grid: table-cell y positions

9

Técnicas de alineamiento de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades físicas y lógicas en CSS + Quiz

12

Técnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Quíz

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: ¿display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generación automática de tracks + Quíz

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

23

Ubicación + Reto

24

Alineamiento en los elementos hijos + Quiz

25

¡Manos al código! Fase de ubicación y alineamiento

26

Continuando con la fase de ubicación y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Continúa con el Curso de Diseño Web con CSS Grid y Flexbox

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Funciones: repeat(), minmax() y fit-content()

21/28
Recursos

Aportes 29

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Un pequeño resumen:
La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.
|
En función Css minmax() el min representa el tamaño mínimo que va a tener cada uno de los elementos de la grid y el max nos indica el valor máximo de los elementos de la grid. Esto nos sirve para que el contenido se vea bien en determinados tamaños.
|
Con la función de auto-fit() ADAPTA las columnas DISPONIBLES ACTUALMENTE en el espacio expandiéndolas para que ocupen cualquier espacio disponible. El navegador hace eso después de LLENAR ese espacio adicional con columnas adicionales (como con el autocompletar) y luego colapsar las vacías.
|
Con la función de auto-fill() LLENA la fila con tantas columnas como pueda caber. Por lo tanto, crea columnas implícitas cada vez que cabe una nueva columna, porque está tratando de LLENAR la fila con tantas columnas como sea posible. Las columnas recién agregadas pueden estar vacías, pero seguirán ocupando un espacio designado en la fila.
/************ Estas funciones con perfectas para el responsive design.*********/
|
La función fit-content() organiza un contenido en especifico el cual lo reserva y el resto seria auto.

Por lo que veo, fit-content() lo que hace es establecer un ancho máximo o algo así, necesita tener obligatorimente contenido adentro que lo haga crecer, no funciona por sí solo, aquí les dejo su docuemntación:
.
fit-content()
.

Para que entiendan mejor el concepto de auto-fit y auto-fill les recomiendo ver este video. Este abarca los conceptos con ejemplos de forma rápida y sencilla:
https://www.youtube.com/watch?v=hPd93mijFCM

Me gustó el curso, solo me hubiese gustado ver un "poquitico" más de código.

Creo que debería de mostrar los conceptos con código escrito en el editor de texto.
Me parece la manera mas efectiva de intuir las explicaciones.

Las diferencias mas claras entre fit-content() y fill-content() son las siguientes:
fill-content()

fit-content()

Se pueden utilizar columnas escritas a mano (si se puede decir así :v), y columnas generadas por repeat() de manera alternada, de manera que si quiero poner 10 columnas con el mismo tamaño con la funcion repeat() y la numero 11 le pongo 100px y la 12 y la 13 las vuelvo a colocar con repeat() y así sucesivamente
.

.
Aquí les dejo el ejemplo en codigo para que prueben:
.

<section class="container">
      <div class="box">1fr</div>
      <div class="box">1fr</div>
      <div class="box box-1">200px</div>
      <div class="box box-2">300px</div>
      <div class="box">1fr</div>
      <div class="box">1fr</div>
  </section>
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container{
  background-color: #2d6187;
  height: 100vh;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr) 200px 300px repeat(2, 1fr);
  grid-template-rows: repeat(5, 100px);
}

.container .box{
  padding: 10px;
  border: 1px solid #fff;
  background-color: #28abb9;
}
.container .box.box-1{
  background-color: #51ff68;
}
.container .box.box-2{
  background-color: #ffbb00;
}

Ya veo, fit-content() estable un ancho máximo hasta donde llegará el contenido, es básicamente igual a max-width.

Considero que es mejor explicar todos estos conceptos en código, con ejemplos en tiempo real y mostrando qué pasa con cada combinación. Le falta eso
.
Como aporte, comparto un video (en inglés) donde explican mejor estos conceptos y lo muestran con ejemplos, haciendo hincapié en un diseño responsivo:
.
https://www.youtube.com/watch?v=hPd93mijFCM

Para los que quieran apreciar mejor el tema de auto-fill y auto-fit, les dejo este code-pen que creé a partir del ejemplo de FalconMaster (ya uno de los compañeros compartió el link del video más abajo 😊)

https://codepen.io/iamdulce_/pen/abJKdwe?editors=1100

tuve que repetir esta clase para poder entender bien el auto-fit y auto fill

esta combinacion de funciones es de las mas poderosas al momento de hacer implementar CSS GRID ! 💚

Notas de la clase

algn me puede explicar sobre auto-fit, autofill y fit-content, please. Me quedó muy confuso los conceptos.

Les dejo un recurso con el cual entendí las propiedades auto-fit
y auto-fill

mucha teoría y poca práctica

Está genial apoyarnos y ayudarnos en contenido gráfico para impartir la información. pero creo que deberías ser más explicita con con ello, es decir ir diciendo e ir haciendo. Todo queda muy por el aire y no provoca.

auto-fit vs auto fill

comparto este texto para ayudar entender este tema de auto-fit y auto-fill

Hola a todos, quiero aportar lo siguiente.

  • El auto-fit se puede considerar como una medida absoluta con respecto a los valores maximos y minimos que se establecen en la función minmax() y el tamaño de la pantalla en donde se despliegue el codigo que estamos trabajando y el grid donde se ubique.

  • El auto-fill, se pueden considerar como medida relativa igual, con respecto a los valores de los maximos y minimos de minmax(), pero ademas optimiza o maximiza el tamaño de la pantalla, ya que esta permite ajustar el contenido del minmax() y sigue creando relativamente al tamaño del componente del grid al que se lo asignemos y la disponibilidad de pixeles de la pantalla.

si tienen observaciones, por favor comenten xD aquí estamos aprendiendo y se aceptas comentarios y/o sugerencias.

Compatibilidad minmax()

Fuente:
https://caniuse.com/?search=minmax()

si no entendieron bien, en lo personal este video de css grid: auto fill y fit es más claro con la explicación

Hola, pueden probar el siguiente código cambiando auto-fit por auto-fill:
.

<!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">
    <title>Document</title>

    <style>
        .container {
            display: grid;
            border: 4px solid rgb(255, 72, 0);
            padding: 10px;
        }

        .container-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
            gap: 20px;

            padding: 40px;
            border: 3px solid blue;
        }

        .container-grid div {
            width: 100%;
            height: 50px;
            border: 1px solid #27c501;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="container-grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

</body>

</html>

resultado:
.

  • auto-fit: Ocupa todo el espacio disponnible en la fila de la Grid.
    .

    .
  • auto-fill: Ocupa la fila con tantas columnas, de tal modo que crea columnas implícitas y se agrega a su continuación cada vez que se cree un nuevo item.
    .
grid-template-columns:  auto fit-content(800px) auto;    /*¿Qué significa  fit-content(800px)?*/
grid template-colum:  auto   min(max-content-size, max(min-content, 800px))  auto;

La columna 2 tomará como mínimo valor el tamaño de su contenido, si reducimos el ancho del navegador el texto hará overflow(desbordamiento).

El maximo valor o tamaño de la culumna 2 sera de 800px.

si quieres entender mejor aquí

Les comparto este enlace para profundizar más con minmax.

Que tal campeon, buen dia… reto cumplido.

/* ----------- */

Esta clase es muy importante para el responsive design.

.container {
  display: grid;
  /*grid-template-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(3, 1fr); /*Better*/
  grid-template-columns: repeat(3, minmax(200px, 300x)); /*Indicates the minimum and maximum size of the cards inside the container*/
}

fit-content()
Ah esta función se le debe pasar un valor como argumento, el elemento se comportara como max-content abarcara el espacio máximo que requiera su contenido esto quiere decir que el crecimiento del elemento se encontrara delimitado por su contenido, pero sin superar el ancho especificado por el valor pasado como parámetro a la función. Por esto el elemento puede ser menor al valor indicado pero jamás superior.

Grilla explicita : Es lo que nosotros definimos y queremos que tenga un comportamiento determinado

Grilla implicita : Es todo aquel contenido que se encuentra dentro de nuestro grid y no alla sido definido

Auto-fill : Va a rellenar toda nuestra fila con todas las columnas que pueda poner dentro y va a crear columnas implicitas en caso que quepan.

Auto-fit : Va a rellenar todo el contenedor con las columnas que tenemeos disponibles

Les comparto el link donde reforce estos conocimientos :

[](url https://www.youtube.com/watch?v=hPd93mijFCM)