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

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

8/28
Recursos

Aportes 64

Preguntas 11

Ordenar por:

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

Los valores que recibe la función translate se calculan con base en el tamaño del elemento. Esto significa que si el elemento tiene un width de 60px, al usar transform: translate(-100%, 0) sería lo mismo que si pusiéramos transform: translate(-60px, 0).
Aplica de igual forma para el eje Y con respecto al height.

Un poco enredado la explicación de posiciones y propiedades ojalá se amplíen más adelante

Hice una cosa medio rara con una de las tarjetitas 😂, traté de aplicarle un efecto 3D usando perspectivas y una rotación pero se ve un poco raro jajaja, igual y se vería mejor si le pusiera una animación o algo jajaja:
.

.
Este fue mi código 😂:

.element2 {
  @extend .element;
  background: papayawhip;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) perspective(600px) rotateY(45deg);
}

Obviamente si aumentamos ese 45deg la perspectiva 3D irá cambiando jaja, sé que es posicionamiento pero no pude evitarlo jajaja

Otra forma es usando la función calc(), con esta función se hace un cálculo directamente dentro del atributo al que queremos verle afectado. Ejemplo lo movía un 50% y le restaba la mitad del elemento para que este se viera centrado. Con esto reducimos una línea de código por elemento jeje.

En esta clase nos enfocaremos en:

  • Table-Cell
  • Positions

Es importante conocer las propiedades que tienen estas técnicas para poder posicionar bien.

En la técnica de Table-Cell tenemos las propiedades de

  • display: table-cell — Hace que cualquier elemento se comporte como una tabla.
  • text-align — Estos últimos dos, los vimos en la clase anterior.
  • vertical-align

La ultima tecnica a ver es la de Positions, que tiene las siguientes propiedades:

  • position: relative
  • position: absolute
  • top
  • right
  • bottom
  • left
    • transform: translate ()

Hay una tabla que coincide con todos los valores de positions, debido a eso podemos ver sus características dependiendo de su valor.
Esto tiene una sintaxis donde va primero

  • Top: Longitud, Porcentaje, Valor por Defecto, Hereda Del Padre
  • Transform: none, transform-functions, ,initial, inherit
  • Transform: translate(x.y)

Mas allá del alineamiento, esta clase me ayudo a comprender de mejor manera el posicionamiento.

Que es un cientifico de datos?

El Científico de Datos o Data Scientist es un perfil profesional que traduce los grandes volúmenes de información disponibles conocidos como Big Data. Provienen de todo tipo de fuentes de información masivas y las convierten en respuestas.

que significa @extend??? o para que sirve???

hey guys, ctrl + / sacan comentario, no sabia como hacerlo =)

No olvidar que la position absolute va directamente ligada al relative del elemento padre en el contenedor. En caso contrario cuando se encuentren trabajando y no les resulta es porque absolute va a ir directamente a tomar en valor relativo del propio body.
Ahí va un pequeño lifehack, saludos

Tambien podriamos usar bottom: 0 o right: 0 para evitarnos un translate()

Para quienes quieren hacer los ejercicios en Visual Studio Code con SASS les remiendo mucho este video para que puedan instalar una extensión sin necesidad de bajar node.js
.
En varias clases replicaba lo que veia en el código que nos pasaron en HTML y CSS pero en esta ya no fue tan fácil porque el display: grid que usábamos en las anteriores ya no permite que uses el vertical-align: aquí. Por eso me vi en la necesidad de usas SASS y te ahorras código de CSS o( ̄▽ ̄)d
.
¡Espero les sirva!

Si no se les alinea reinicien…

entonces los elementos hijos del container deben ser primero dysplay: inline-block para que despues los puedas tratar como display table?

Clase 8 y no veo nada de Grid.

No le veo mucho sentido a estar explicando soluciones de posicionamiento que se usaban antes de css grid. Entiendo que la profe ha querido mostrarlas para que luego podamos ver lo fácil que todo se logra con css grid. Pero al final los alumnos que no vivieron la época pre-css grid no la comprenden del todo, sienten muy rápidas las explicaciones (no es mi caso). Y en todo caso es un contenido innecesario ahora mismo si la propuesta es css grid. Me parece un relleno total al contenido del curso.

En definitiva me quedo con Positions

Fantastic! I didn’t know anything about transform, today I have a new property to play with CSS.
.
Thanks. 😁

CSS Aligment Techniques - Table Cell
https://codepen.io/luisfalconmx/pen/MWJwrbb

CSS Aligment Techniques - Positions
https://codepen.io/luisfalconmx/pen/BapNJQX

Minuto 11:00 aprox. Otra manera de posicionar al centro (si sabemos el tamaño del elemento #px) es usar "calc(50% - #px)". Es una opción más corta de usar que "transform", pero, a largo plazo creo que si hay cambios en tamaños del elemento va ser complejo ajustar cada valor asignado en calc. Es decir, que a largo plazo y para evitar dolores de cabeza es mejor usar "transform"

es más sencillo, es muy confusa la explicación

Los valores de top/left hace referencia al porcentaje de la altura/ancho del elemento padre (contenedor). Mientras que los valores de los ejes X/Y en translate de transform hacen referencia a la altura/ancho del elemento en sí

Otro position que también es muy imoortante y muy util es el position fixed

Con la función calc(50% - (la mitad del width del elemento)) podemos quizás ahorrarnos otra linea de código.

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  font-family: 'Lato', sans-serif;
  width: 550px;
}

.container {
  background: turquoise;
  width: 180px;
  height: 180px;
  position: relative;
}

.element {
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}

.element1 {
  @extend .element;
  background: papayawhip;
  position: absolute;
  left: 0;
  top:0 ;
}

.element2 {
  @extend .element;
  background: papayawhip;
  position: absolute;
  left:0 ;
  top:50% ;
   transform: translate(0 ,-50%);
}

.element3 {
  @extend .element;
  background: papayawhip;
  position: absolute;
  left:0 ;
  bottom:0 ;
  // transform: ;
}

.element4 {
  @extend .element;
  background: pink;
  position: absolute;
  left: 50%;
  top:0;
  transform:translate(-50%, 0) ;
}

.element5 {
  @extend .element;
  background: pink;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform:  translate(-50%,50%);
}

.element6 {
  @extend .element;
  background: pink;
  position: absolute;
  left:50% ;
  bottom:0;
  transform:translate(-50%,0) ;
}

.element7 {
  @extend .element;
  background: lightcyan;
  position: absolute;
  right:0 ;
  top:0;
  // transform: ;
}

.element8 {
  @extend .element;
  background: lightcyan;
  position: absolute;
  right:0 ;
   top:50% ;
   transform:translate(0,-50%) ;
}

.element9 {
  @extend .element;
  background: lightcyan;
  position: absolute;
  right:0 ;
 bottom:0;
}

pero que calidad platzi!!

soy nuevo en este mundo del desarrollo web, me estaba costando un poco css, hasta que vi esta clase

me perdi en el cuadrito

Hola a todos. Para las personas que quieren guardar el codigo en su computadora, acá les dejó el codigo en HTML y CSS.

Alineación con tabe-cell:

<!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>Alineacion con Table-cell</title>
    <style>
        .element {
            width: 60px;
            height: 60px;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
            display: inline-block;
        }
        .container {
            background-color: turquoise;
            border: 1px solid white;
            width: 180px;
            height: 180px;
            display: table-cell;
        }
        .element1 {
            background-color: papayawhip;
        }
        .element2 {
            background-color: pink;
        }
        .element3 {
            background-color: lightcyan;
        }
        .container1 {
            text-align: left;
            vertical-align: top;
        }
        .container2 {
            text-align: left;
            vertical-align: middle;
        }
        .container3 {
            text-align: left;
            vertical-align: bottom;
        }
        .container4 {
            text-align: center;
            vertical-align: top;
        }
        .container5 {
            text-align: center;
            vertical-align: middle;
        }
        .container6 {
            text-align: center;
            vertical-align: bottom;
        }
        .container7 {
            text-align: right;
            vertical-align: top;
        }
        .container8 {
            text-align: right;
            vertical-align: middle;
        }
        .container9 {
            text-align: right;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="container container1">
        <div class="element element1">top left</div>
    </div>
    <div class="container container2">
        <div class="element element1">center left</div>
    </div>
    <div class="container container3">
        <div class="element element1">bottom left</div>
    </div>

    <div class="container container4">
        <div class="element element2">top center</div>
    </div>
    <div class="container container5">
        <div class="element element2">center center</div>
    </div>
    <div class="container container6">
        <div class="element element2">bottom center</div>
    </div>

    <div class="container container7">
        <div class="element element3">top right</div>
    </div>
    <div class="container container8">
        <div class="element element3">center right</div>
    </div>
    <div class="container container9">
        <div class="element element3">bottom right</div>
    </div>
</body>
</html>

Alienación con position

<!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>Alineacion con la propiedad position</title>
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 550px;
        }
        .container {
            background-color: turquoise;
            width: 180px;
            height: 180px;
            position: relative;
        }
        .element {
            width: 60px;
            height: 60px;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
            position: absolute;
        }
        .element1 {
            background-color: papayawhip;
            left: 0;
            top: 0;
        }
        .element2 {
            background-color: papayawhip;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
        }
        .element3 {
            background-color: papayawhip;
            left: 0;
            top: 100%;
            transform: translate(0, -100%);
        }
        .element4 {
            background-color: pink;
            left: 50%;
            top: 0;
            transform: translate(-50%, 0);
        }
        .element5 {
            background-color: pink;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .element6 {
            background-color: pink;
            left: 50%;
            top: 100%;
            transform: translate(-50%, -100%);
        }
        .element7 {
            background-color: lightcyan;
            left: 100%;
            top: 0;
            transform: translate(-100%, 0);
        }
        .element8 {
            background-color: lightcyan;
            left: 100%;
            top: 50%;
            transform: translate(-100%, -50%);
        }
        .element9 {
            background-color: lightcyan;
            left: 100%;
            top: 100%;
            transform: translate(-100%, -100%);
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="element element1">top left</div>
        </div>
        <div class="container">
            <div class="element element2">center left</div>
        </div>
        <div class="container">
            <div class="element element3">bottom left</div>
        </div>

        <div class="container">
            <div class="element element4">top center</div>
        </div>
        <div class="container">
            <div class="element element5">center center</div>
        </div>
        <div class="container">
            <div class="element element6">bottom center</div>
        </div>

        <div class="container">
            <div class="element element7">top right</div>
        </div>
        <div class="container">
            <div class="element element8">center right</div>
        </div>
        <div class="container">
            <div class="element element9">bottom right</div>
        </div>
    </div>
</body>
</html>

Espero les ayude.

Yo lo que hice para comprender mejor fue poner en las pocisiones el 50% y en translate
fue el otro 50% sumado da el 100% ejemplo queremos poner un objeto a la lef: 50% position-x: -50%
Primero sumamos 50 + 50 = 100 pero como el eje x es negativo.
le restamos al 100% los 50

.element6 {
  @extend .element;
  background: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}
Y cual seria la diferencia de centrarlo con justify y align ya que a mi parecer se me hace mucho mas entendible y facil de usar que este tipo de posicionamiento, en donde me perdi un poco con el transform y sus valores🥴, y si deseo posicionar un elemento en específico lo hago con los margin y para que sea responsive le asigno valores relativos 🤷

Esta clase me aclaró un montón 😃

Este método está muy piola 👍

super clara la explicacion y me encanto la clase!

No conocia la propiedad transform en este contexto. 🤯 Genial

La ventaja de estos métodos es que las alineaciones ya no dependen del tamaño de los contenedores o de los elementos. Les dejo mis aportes:
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/table-cell.html
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/position.html

👨‍💻 El transform: translate(x,y) reposiciona el origen de coordenadas del elemento, es decir el (0,0) con respecto sus dimensiones. Cabe mencionar que el top, right, left y bottom de position se calcula teniendo cuenta este punto origen.
.
Sin transform: translate(x,y):

.
Con transform: translate(x,y):

Yo aplique la técnica muy parecida como con el “margin” nada mas que ahora con el “position”, y creo que también es valida!
@import url(‘https://fonts.googleapis.com/css2?family=Lato&display=swap’);

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
font-family: ‘Lato’, sans-serif;
width: 550px;
}

.container {
background: turquoise;
width: 180px;
height: 180px;
position: relative;
}

.element {
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}

.element1 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 0;
}

.element2 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 60px;
}

.element3 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 120px;
// transform: ;
}

.element4 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
// transform: ;
}

.element5 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
top: 60px;
// transform: ;
}

.element6 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
top: 120px;
// transform: ;
}

.element7 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
// transform: ;
}

.element8 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
top: 60px;
// transform: ;
}

.element9 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
top: 120px;
// transform: ;
}

Genial, no conocía esa propiedad, table-cell.

esta emocionada la profesora, se equivoco mucho xd

table-cell

La ultima tecnica con los position y translate es una dulzura 🥰

banda, que atajo de teclado me quita las palabras comentadas?

De los cursos que he tomado hasta el momento, solo había visto las técnicas de margin y la de positions. Pero me agrada el ahora conocer line-height y table-cell, porque tarde o temprano los tendré que ocupar.

creo que me gusta mas usar calc para los position absolute

Positions: static, relative, absolute, fixed

Muy buen aporte, me ha ayudadomucho

Honestamente prefiero trabajar con calc() es más facil de entender y de aplicar. Aunque translate me parece igual de valido.

Position is very useful

Algo que no se explica en la clase es que display: table-cell; no funciona con grid layout.

En esta clase quedo bien explicado lo de positions en CSS, pero dejo la documentación de MDN sobre positions, para que puedan reforzar o si nos les quedo del todo claro ahí pueden encontrar mucha información que seguramente les ayudara, espero les ayude. 🔥👌

link: https://developer.mozilla.org/es/docs/Web/CSS/position

Dejo un enlace con contenido sencillo para entender la propiedad transform y como funciona translate. El elemento se mueve respecto su posición actual y, por lo tanto, tiene encuenta el tamaño específico que ocupa para calcular cuanto se “traslada”. El enlace a la guía.

Wao esta clase me gustó. Ahora comprendo más el bendito position absolute y relative.

Me puse a buscar información sobre transform porque me pareció curioso el hecho de que la profe pudo simplemente usar transform para ubicar cada elemento en su lugar y lo habría hecho con 1 sola línea de código para cada elemento, después de buscar un poco de información (que dejaré más abajo los videos que encontré) descubrí que al utilizar porcentajes no necesitamos estar cambiando el código cuando cambia el tamaño del elemento o cambia el tamaño del contenedor. Utilizando los porcentajes nos mantiene ubicados en la posición que necesitemos los elementos.

CSS Transform nota: este está en ingles

TRANSFORM-TRANSLATE en CSS este en español

¡Ojalá que le sirva a alguno la información!

Yo no conocía la propiedad tranform. Yo suelo usar calc. Que podemos usar para literalmente hacer operaciones, como sumas, restas, multiplicaciones o divisiones. Entonces, para posicionar un elemento de un ancho de 40px en el centro de manera horizontal hacemos lo siguiente:

left: calc(50% - 20px)

Donde el 20px representa la mitad del elemento que estamos moviendo.

Me gustó mucho la técnica positions. Muy intuitiva y cómoda.

ok

hay varios elementos que con bottom y right podríamos ovbiar el transform

Les dejo la tabla de positions, me pareció muy buena información.

Que maravilla de clase, veo todo tan claro ahora 😄

Algo que me parece una mejor solución (por favor sean libres de corregirme) para no usar translate en este caso particular, es sabiendo que el elemento tiene una altura de 1/3 del contenedor padre, es decir 60px sobre los 180px del container, podemos usar

 top: calc((100%/3) *2);

Y seria como decir ‘Ubicate empezando el 66% del viewport height’. O asi lo entienendo yo.

Muy bien explicado. De hecho las positions siguen siendo parte importante en CSS.

Jueguen con esto (En especial con la última opción del CSS demo): https://developer.mozilla.org/es/docs/Web/CSS/transform

Y entenderán transform 😄