Keywords especiales

KEYWORDS ESPECIALES

• fr : Es una unidad de medida especial de css grid para darle ancho o alto a filas y columnas 1fr representa una fraccion del total de columnas o filas.

• min-content : Ajusta el ancho de la celda lo mínimo posible sin romper su contenido.

• max-content : Ajusta el ancho de la celda lo máximo posible para mostrar su contenido.

• auto-fill : Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor.

• auto-fit : Ensancha las columnas para que ocupen todo el espacio del contenedor.

auto-fill y auto-fit ayudan a la grilla a ocupar el 100% del espacio disponible.

min-content hará que nuestro contenido haga salto de linea en cada oportunidad que tenga, siendo tan ancho como la palabra mas larga. max-content no tendrá salto de linea, ocupando todo el ancho que pueda, incluso causando overflow.

Siento como si me estuviese explicando una amiga, super sencillo y la profe super natural, que cool

Poco a poco…

estoy amando este curso, creo que es el mas y mejor explicado y estructurado de los que he visto.

Algo que creo que faltó mencionar, es que el número de filas/columnas al usar auto-fill y auto-fit está determinado por el número de elementos dentro del contenedor de la grid.

Keyword Especiales

• Fr : Es una unidad de medida especial de css grid para darle ancho o alto a filas y columnas 1fr representa una fraccion del total de columnas o filas.

• min-content: Ajusta el ancho de la columna si romper el contenido de esta columna

• max-content: crecer la filas para que el contendio se pueda ver lo mas amplio posible

• auto-fil: Agrega columnas fantasma que rellan el espacio

• auto-fit: Hace crecer las columnas que ya tenemos para que ocupen el 100%

Hola, dejo esta página donde muestran más ejemplos de css grid.

https://ishadeed.com/article/css-grid-minmax/

En algún momento, se me hacía muy “complejo” ponerlo dentro de un proyecto; por lo “Responsive”. Gracias Platzi, por hacer el código más fácil.

auto-fit y auto-fill

• auto-fit: intenta crear nuevas columnas siempre que cuente con el espacio, sin embargo, si el contenido es vacío hace que las columnas que si tienen contenido se expandan (siempre que sea posible ocupando el espacio disponible)
• auto-fill: intenta crear nuevas columnas siempre que cuente con el espacio, sin embargo, si el contenido es vacío hace que ellas aunque no existan, ocupen el espacio como si existieran

• Los fr son medidas relativas y el min-content/max-content son medidas absolutas (son fijos)
• Cuando se usa auto-fit o un auto-fill se necesita declarar un minmax

Es genial como vas aprendiendo cosas nuevas

La Unidad fr
Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Más info

Hola, les comparto mi apunte completo de esta clase: 👉🏼 aquí

A ¿cuanto equivale un 1fr en pixeles?🤔

muy útil esto

Hola! Dejo articulos para que guarden en sus notas 😄

• min-content

• max-content

• auto-fill

  Suppose the grid container has a definite or maximal size in the relevant axis. In that case, the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. If that is definite, treat each track as its maximal track sizing function (each independent value used to define grid-template-rows or grid-template-columns). Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is 1. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

• auto-fit

  It behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed if they’re all empty.)

  A collapsed track is treated as having a single fixed track sizing function of 0px, and the gutters on either side of it collapse.

  For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., 1px), to avoid division by zero.

no me gusta a palabra grilla 😂

• auto-fill/auto-fit Estas dos propiedades nos ayudan a que nuestra grilla ocupe el 100% del espacio que tiene.
  • Auto-fill agrega columnas “fantasma” que van rellenando el espacio
  • auto-fit hace más anchas las columnas que ya tenemos para que ocupen el 100%

Keywords especiales

• fr : sirve para dar ancho o alto a filas y columnas. 1fr es una fracción de la grilla.
  Ejemplo:

grid-template-columns: 1fr 3fr 1fr 2fr;

• min-content: ajusta el ancho de la celda al mínimo sin romper su contenido.
• max-content: ajusta las columnas o filas para que se vean lo más amplias posible.
• auto-fill: agregan columnas para llenar el espacio.
• auto-fit: amplían las columnas para que ocupen el 100%