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

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

9/28
Recursos

Aportes 43

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo antes le huía a CSS y me sentía muy identificado con el gif de abajo porque para mí era muy difícil aprender todo eso de los trucos, pero con práctica y paciencia se va dominando. Siento que en normal sentir que CSS no es para ti porque tal vez al inicio pueda ser complciado, pero a medida que avanzas, lo practicas y vas aprendiendo, CSS se vuelve super intuitivo y super fácil de manejar.
.
Y bueno, si hablamos de CSS Grid, eso hará que ames CSS Jajaja, solo es cuestión de practicarlo y no huirle 💚.
.

Margin Collapsing en una imagen:

Las técnicas de alineamiento vistas son pertenecientes a CSS2 pero se siguen utilizando a la fecha, claro que estas cuentan con sus ventajas y desventajas.

Margin

  • Ventajas: El valor auto alinea horizontalmente cualquier elemento con cualquier ancho.
  • Desventajas: Alinear verticalmente, ya que, en cada caso, deberán calcularse estos valores.

line-height

  • Ventajas: correcta alineación.
  • Desventajas: si el texto ocupa más de una linea el elemento toma un alto más grande de lo necesario para los cálculos.

table-cell

  • Ventajas: La alineación vertical no esta condicionada por fuentes, tamaños de fuentes o alturas de linea.
  • Desventajas: vertical-align sólo se aplica a elementos inline.

La mayor limitante de todas ellas es que contienen muchas propiedades físicas:

  • margin-top
  • padding-bottom
  • border-right
  • left

Les comparto mis apuntes sobre margin collapsing del Curso de Frontend Developer. 😄

Colapso de márgenes

Sucede cuando

Esto sucede con elementos de tipo block en los que sus margin, en el eje ordenas (y), no se suman sino que se solapan o sobrepone una con otra.

No sucede cuando

No sucede cuando tenemos un elemento contenedor con el display ya sea flex o grid, ya no se colapsan los márgenes aún teniendo elementos block porque tenemos un wraper o contenedor con grid o flexblox.

Wait… ¿entonces las propiedades físicas top, bottom, left y right cambian dependiendo desde dónde estás viendo la web? 😱

Las técnicas de alineamiento vistas son pertenecientes a CSS2 pero se siguen utilizando a la fecha, claro que estas cuentan con sus ventajas y desventajas.

Margin

  • Ventajas: El valor auto alinea horizontalmente cualquier elemento con cualquier ancho.
  • Desventajas: Alinear verticalmente, ya que, en cada caso, deberán calcularse estos valores.

line-height

  • Ventajas: correcta alineación.
  • Desventajas: si el texto ocupa más de una linea el elemento toma un alto más grande de lo necesario para los cálculos.

table-cell

  • Ventajas: La alineación vertical no esta condicionada por fuentes, tamaños de fuentes o alturas de linea.
  • Desventajas: vertical-align sólo se aplica a elementos inline.

La mayor limitante de todas ellas es que contienen muchas propiedades físicas:

  • margin-top
  • padding-bottom
  • border-right
  • left

Notas de la clase

El display: grid es lo máximo!

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

<h4>Ideas/conceptos claves</h4>

Modos Escritura son la dirección en que se lee el contenido que dependiendo de la región serán diferentes

<h4>Apuntes</h4>

No hay ninguna propiedad específica para alinear elementos de bloque en CSS2

  • Mayormente son trucos de propiedades que no son específicas para alinear elementos
    • Por esto muchas personas huyen a trabajar con CSS y piensan que hoy seguimos trabajando con trucos de magia

<h3>Margin</h3>

ventajas

  • El valor auto alinea horizontalmente cualquier elemento con cualquier ancho

desventajas

  • Alinear verticalmente, ya que, en cada caso, se deben calcular estos valores

<h3>Line-Height</h3>

ventajas

  • Correcta alineación

desventajas

  • SI el texto ocupa más de una línea el elemento toma un alto más grande que lo necesario para los cálculos

<h3>Table-Cell</h3>

ventajas

  • La alineación vertical no está condicionada por fuente, tamaños de fuentes o alturas de línea

desventajas

  • Vertical-align se aplica sólo a elementos inline

<h4>La mayor limitante</h4>

propiedades físicas

  • Margin-top
  • padding-bottom
  • border-right
  • left

  • Modos Escritura
  • Propiedades lógicas

CSS Grid Layout se destaca por dividir una página en regiones principales o definir la relación en términos de tamaño, posición y capa, entre partes de un control construido a partir de un archivo HTML.

Al igual que las tablas, el diseño de cuadrícula permite al autor alinear elementos en columnas y filas. Sin embargo, muchos más diseños son posibles o más fáciles con la cuadrícula CSS que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían ubicarse a sí mismos para que se superpongan entre sí, de manera similar a los elementos posicionados por CSS.

Esto suena a adopción masiva de Grid y flex

Adjunto gráfica del CSS Grid

No hay ninguna propiedad especifica para alinear elementos de bloque en CSS2. Lo visto anteriormente se hicieron en base a trucos. Y gracias a esto hay muchas personas que no quieren trabajar en CSS por su complejidad.

Ventajas y desventajas de los métodos vistos anteriormente:

<h3>Margin:</h3>
  • Ventaja:

    El valor “auto” alinea horizontalmente cualquier elemento con cualquier ancho.

  • Desventaja:

    Para alinear verticalmente en todos los casos tendremos que calcular estos valores y evitar el margin collapsing.

<h3>Line-Height</h3>
  • Ventaja:

    Se puede alinear correctamente.

  • Desventaja:

    Si el texto ocupa mas de una linea, el elemento toma un alto mas grande que lo necesario para los cálculos.

<h3>Table-Cell</h3>
- Ventaja:

    La alineacion vertical no esta condicionada por fuentes o el tamano de estas mismas.

- Desventaja:

    Vertical-Align solo se puede aplicar en elementos Inline.

La mayor limitante son las propiedades físicas como margin-top, bottom, left, etc. Hoy en día ya deberíamos traducirlo a propiedades lógicas.

Te agradezco mucho todo este contexto que est[as dando, así podemos valorar lo que estamos ganando, visualizar “the big picture” de CSS y no preocuparnos por todas esas opciones que no conocemos, además de entender viejos códigos y en última instancia usar alguna que otra si verdaderamente la necesitamos. Gracias.

Si le tengo miedo a CSS jsjs me desespera un poco (y se que esta mal) ver todas las etiquetas y trucos🤯

En mi caso siempre se me hizo fácil el CSS pero no tuve la misma suerte con Javascript hubiera deseado que fuera al revés jeje

Yo pensé que la manera en como usamos CSS es la manera en la cual fue creada para usarla. Digo, no creo que las propiedades de flex-wrap: wrap sean trucos…

Team, entiendo sobre margin collapsing lo siguiente:

explicacion detallada del colapso de margenes <https://dev.to/lupitacode/entendiendo-el-colapso-de-margenes-margin-collapsing-4oj6>
line-height es magia negra
Literal, yo base muchas de mis implementaciones con esos trucos(Que varios no conocía como tal lo muestra este curso), ahora con el conocimiento en CSS Grid puedo hacerlo en menos código pensando en muchas cosas más

waos y yo alineando con flexbox desde que empece con CSS xd

¡¡Esto no lo sabía!!
¡Interesante dato, gracias!

También conozco el “studying-collapsing”, frecuentemente me da como a las 3 am.

¿Alguien se ha dado cuenta que el nombre de esta clase es “Técnicas de alineamiento de CSS Grid”, pero en el video en ningún momento hace referencia al CSS Grid de la actualidad, sino que habla de las técnicas de alineamiento ANTES de que existiera CSS Grid?

Creo que al título le faltaba una palabra más porque en las dos clases anteriores se hablaba de “Técnicas de alineamiento ANTES de CSS Grid”, es un pequeño detalle pero puede confundir a algunos que aun son nuevos en esto.

Margin Collapsing:

Sucede cuando dos margenes, bottom y top se combinan, usualmente sucede en estos casos:

El colapso de margen ocurre en tres casos básicos:

  • Hermanos adjacentes
    Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).

  • Padre y primer/último hijo
    Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el margin-top (en-US) de un bloque del margin-top (en-US) de su primer bloque hijo; o no hay borde, padding, contenido en línea, height, min-height, o max-height para separar el margin-bottom de un bloque del margin-bottom de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.

  • Bloques vacíos
    Si no hay borde, padding, contenido en línea, height, o min-height para separar el margin-top (en-US) de un bloque de su margin-bottom, entonces sus márgenes superiores e inferiores colapsan.

Fuente

No quiero obviar decir que Estefany tiene un amplio conocimiento en el tema

“Eso no es con lo que trabajamos hoy en día” fiiiuu que alivio, ya le voy tomando amor a CSS ❤️

Los márgenes colapsados ocurren cuando dos márgenes verticales entran en contacto entre sí. Si un margen es mayor que el otro, ese margen anula al otro, dejando un margen.

Es tipo:
50px + (-25px) = 25px

Los márgenes Top (en-US) y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan!

aunque es verdad lo de los modos de escritura, no tiene sentido hacer un código muy complejo que se pueda usar en todas partes del mundo cuando los consumidores de tu producto solo son de cierta región

Mis apuntes
No hay ninguna propiedad específica para alinear elementos.

Magin:

  • ventaja: El valor auto alinea horizontalmente cualquier elemento con cualquier ancho
  • Desventaja: alinear verticalmente, ya que, en cada caso, deberá calcularse estos valores

Line-height

  • ventaja: correcta alineación
  • desventaja: si el texto ocupa más de una línea, el elemento toma un alto más grande que los necesarios para cálculos

Table-cell

  • Ventaja. La alineación vertical no está condicionada por fuentes, tamaños de fuentes o alturas de línea.
  • Desventaja: vertical-align se aplica solo a elementos inline

La mayor limitante son propiedades físicas:

  • margin-top
  • padding-bottom
  • border-right
  • left

Hoy en día ya debemos dejar de pensar en este tipo de conceptos físicos y traducirlos a otros que son_ propiedades lógicas_ y esto va de la mano con modos de escritura

Resumen:
No hay una propiedad específica para alinear elementos en CSS2, eran “trucos de magia”.

  • margin
    • Ventaja: El valor autro alinea horizontalmente cualquier elemento con cualquier ancho.
    • Desventaja: Alinear verticalmente, ya que, en cada caso, deberán calcularse estos valores.
  • line-height
    • Ventaja: Correcta alineación.
    • Desventaja: Si el texto ocupa más de una línea el elemento toma un alto más grande que lo necesario para los cálculos.
  • table-cell
    • Ventaja: La alineación vertical no está condicionada por fuentes, tamaños de fuentes o alturas de línea.
    • Desventaja: vertical-align se aplica sólo a elementos Inline.

Wextensible - Para ver cómo se hacían antes las alineaciones en el antiguo CSS

Olvidemos las propiedades físicas (margin, padding, etc) y mejor empecemos a pensar en propiedades lógicas.

Ultimamente he visto algo relacionado con propiedades lógicas. Pero a decir verdad me dan miedo. siento que cambia la idea con la que venia aprendiendo. Ojalá en este curso podamos ver algo de eso ya que con usted teacher, todo se vuelve más fácil.
A seguir aprendiendo 😃

Un breve resumen documentado en NOTION
espero que les sirva a alguien
https://www.notion.so/T-cnicas-de-Alineamiento-2a2f9d976d954931aaa0fb599e346586

.

I love the way you teach us, Teff. Thank you, I’m learning a lot! 💪🏻👨🏻‍💻

Mis Apuntes

No hay ninguna propiedad específica para alinear elementos de bloque en CSS2

  • Mayormente son trucos de propiedades que no son específicas para alinear elementos
    • Por esto muchas personas huyen a trabajar con CSS y piensan que hoy seguimos trabajando con trucos de magia

Margin

ventajas

  • El valor auto alinea horizontalmente cualquier elemento con cualquier ancho

desventajas

  • Alinear verticalmente, ya que, en cada caso, se deben calcular estos valores

Line-Height

ventajas

  • Correcta alineación

desventajas

  • SI el texto ocupa más de una línea el elemento toma un alto más grande que lo necesario para los cálculos

Table-Cell

ventajas

  • La alineación vertical no está condicionada por fuente, tamaños de fuentes o alturas de línea

desventajas

  • Vertical-align se aplica sólo a elementos inline

La mayor limitante

propiedades físicas

  • Margin-top
  • padding-bottom
  • border-right
  • left

  • Modos Escritura
  • Propiedades lógicas