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 antes 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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

21/28
Recursos

Aportes 33

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

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

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()
.

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.

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;
}

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

fit-content()

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

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

Notas de la clase

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

Que tal campeon, buen dia鈥 reto cumplido.

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

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

funci贸n fit-content()

馃挕 Esta funci贸n para CSS Grid nos permite establecer solo un valor m谩ximo para el alto/ancho en caso se trate con una row/column respectivamente.

fit-content es ideal para que el contenido no ocupe m谩s espacio del necesario.

Valores


Esta propiedad solo recibe un argumento para su funcionamiento, siendo este el valor de la longitud m谩xima de la fila 贸 columna.

.grid-container{
	grid-template-columns: 
fit-content(size);
}

Ejemplo


.container{
    display: grid;
    grid-template-columns:
		auto fit-content(800px) auto;
}

Finalmente


Esta funci贸n se usa con la propiedad para definir filas o columnas: grid-template

En la pr谩ctica esta propiedad es equivalente a la propiedad minmax()] con un valor min铆mo por defecto de 0.

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

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*/
}

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()

El curso esta bueno, lastima que no tiene el texto de las clases como otros cursos, que ayudan para tomar notas o cosas especificas para no tener que poner pausa, retroceder, ect, hasta que anotas el concepto, para un apunte personal.

Encontr茅 un art铆culo que explica muy al detalle y super f谩cil de entender la diferencia entre auto-fit y auto-fill https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

Manos al codigo Dice 馃槀 los 鈥渞ebeldes鈥 entenderan.

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.

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)