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

Alineamiento en los elementos hijos + Quiz

24/28
Recursos

Aportes 102

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Ser铆a la C porque, seg煤n lo visto, primero es align (vertical) y luego justify(horizontal), por tanto, place-self: center stretch lo que estar铆a haciendo es, alinear de manera vertical en el centro y de manera horizontal se alinea con un tipo ``stretch` que es b谩sicamente estirarse todo lo que se pueda 馃.

La respuesta al quiz es: C

place-self: center stretch

Empec茅 a agregar cosas hasta que se me fue de las manos pero me gusto, vamos a ver si logro hacerlo.

馃槃

Respuesta al quiz es C; por deducci贸n, es la 煤nica respuesta que contiene los dos atributos necesarios para funcionar: justify y align.

@media (prefers-color-scheme: dark) { /* Styles according the dark mode */ }

este media les ayudar谩 a estilizar su p谩gina web en modo oscuro.

La respuesta del quiz es la opci贸n C: place-self establece tanto align-self y justify-self. align-self toma el valor de center, as铆 que el elemento es alineado al centro de forma vertical, y justify-self toma el valor de stretch por lo que el elemento ocupa todo el ancho de la celda.

La respuesta al quiz es: C

Respuesta: C.
Alineado al centro verticalmente y estirado para que ocupe todo horizontalmente

Si queremos manipular desde los items podemos hacer uso de las propiedades parecidas a las que vimos como: Justify-Align-Place pero en este caso no ser谩n Item o Content, si no SELF.

Justify-Self: MISMAS PROPIEDADES QUE LOS ITEM O SELF

Una Pseudo clase que nos ayuda a utilizar un elemento o elementos en especifico y no llenarnos de mas clases diferentes, podemos utilizar la:

.item:nth-child(1){ }

Aqu铆 lo que decimos es que podemos utilizar el primer elemento que contenga la clase item.

Si queremos utilizar todos y solo excluir a uno, podemos a usar:

.item:not(:nth-child(1)){}

Donde especificamos que usaremos todos los elementos de la clase EXCEPTO el primero.

La respuesta correcta es la C Para los que no sepan que es stretch dejo la documentaci贸n abajo:
stretch
Los elementos flexibles son estirados de modo que el tama帽o transversal de sus l铆mites sea el mismo de la l铆nea, manteniendo sus restricciones de anchura y altura.

B谩sicamente nos dice que estira el elemento para que ocupe el 100% de su contenedor respetando su propio ancho y alto m谩ximo y m铆nimo, en este caso ya que usamos el stretch para el valor justify que est谩 en el eje X ocupa todo el ancho.

Para 鈥榡ustify鈥 que utiliza el 鈥榠nline-axis鈥, el width (ancho) del elemento debe estar definido. Para 鈥榓lign鈥 que utiliza el 鈥榖lock-axis鈥, el height (alto) del elemento debe estar definido.
De lo contrario los elementos no toman las propiedades, por no tener un espacio para determinar el punto de inicio y final.

No lo entend铆 a la primera, pero siempre tengo en cuenta las pseudoclases y pseudoelementos, es algo que tengo que ver y repasar.
Por suerte lo entend铆, y ya que me la pasaba usando clases con nombres espec铆ficos para cada elemento, y no sabia como utilizar pseudoclases con 鈥渉eredados鈥 me va a ayudar bastante en las pr谩cticas.
Los justify y align los aprendi bastante bien en los cursos anteriores y adem谩s con los juegos que hab铆a en los comentarios sobre flex.

Dejo los links de los juegos, les puede servir de repaso.
https://mastery.games/flexboxzombies/
https://codepip.com/games/flexbox-froggy/

la C

Si, la respuesta es la C

C

C

El shortcut ser铆a 鈥減lace-self鈥 ya que es la abreviaci贸n para 鈥渏ustify-self鈥 (horizontal) y 鈥渁lign-self鈥 (vertical): entonces va 鈥渃enter鈥 + 鈥渟tretch鈥 (estirar hasta el l铆mite) :3

La C .!

La respuesta es: C

place-self: center stretch;

C

La respuesta al quiz ser铆a C, ya que la primera propiedad de place-self representa align-self (que est谩 centrada) y la segunda justify-self (que est谩 estirada)

Opci贸n 鈥淐鈥

place-self: center stretch;

La respuesta seria la C

place-self: center stretch

Seg煤n lo que yo hice, la respuesta es la 鈥淐鈥.

Respuesta C:

place-self: center stretch;

The answer to the quiz is : C
place-items: end center;

C

La primera propiedad reemplaza a align-self. Align-self mueve el contenedor en el eje vertical asi que por eso queda centrado.

Stretch lo que hace es estirar el contenido en todo el espacio disponible, en este caso de manera horizontal

La respuesta al quiz es la C, ya que si solo utilizamos place-self: center, este solo nos ubicara el contenido en el centro pero no abarcara todo el ancho del contenedor, y si usamos solo stretch este absolutamente toda el area del contenedor.

Claramente es la C

Opci贸n C es la tareita xD:
place-self: center stretch;

La respuesta es la C

place-self: center stretch;

Centra de manera vertical y estira de manera horizontal:

Pienso que es la opcion C, con el primero 鈥榗enter鈥 decimos que queremos el elemento centrado en el axis vertical, y con stretch que tome como el espacio disponible en el axis horizontal.

C

La respuesta correcta es la C

Esta es la que yo e usado

.contenedor{
    background: papayawhip;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 300px;
    height: 180px;
  
}
.item:nth-child(1){
    background-color: hotpink;
    place-self: center stretch;
    height: 40px;
}
.item:not(:nth-child(1)){
    background-color: turquoise;
}

La respuesta es la C

C

Qu铆z:
La respuesta es la
>C

Repuesta es 鈥淐鈥

La respuesta es C :

place-self: center stretch;

La respuesta del Quiz seria la C

Quiz!
place-self: center stretch
Centramos verticalmente y usamos stretch(valor por defecto) para usar todo el espacio disponible horizontalmente.

.item:nth-child(1) {
  background: hotpink;
  place-self: center stretch;
}
```  Seria el C

place-self Qu铆z : )

.container{
    background : papayawhip;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 60px;
    height: 60px;
  }
  .item:nth-child(1){  
    background: hotpink;
    place-self: center stretch; 
  }
  .item:not(:nth-child(1)){
    background: turquoise;
  }

la c!!!

place-self: center stretch;

La respuesta es la C place-self: center stretch; porque se est谩 alineando en el centro en bloque seguido de stretch en l铆nea.

Respuesta: C

Justify-self

Align Self

Place Self es una abreviacion de:

place-self Qu铆z:

La respuesta es la C:

place-seflt: center stretch;

La C
place-self: center stretch;

.item:nth-child(1) {
background: hotpink;
place-self: center stretch;
}
La respuesta al quiz es: C

ES EL C

. . .

La respuesta al quiz es C

El Quiz = C

Place-self: center stretch;

La respuesta al quiz es:

place-self: center stretch; 

Quien lo diria鈥

Respuesta: C
place-self: center stretch;

La respuesta al quiz: es la C.
Porque se puede alinear al centro verticalmente y con el stretch, estirarlo para que ocupe todo el espacio horizontalmente

La respuesta es la C, debido a que strech hace que se llene su volumen a lo largo del eje trasversal, en este caso el eje horizontal.

c

body{
margin: 0;
}
.container{
background: papayawhip;
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: repeat(2, 1fr);

}
.item_one{
background: blueviolet;
place-self: center stretch;
}
.item{
background: cadetblue;
}

Uy que buena esa regla del not, not la tenia, jaja, tomando nota

La respuesta es C

Quiz:
La respuesta es la opci贸n C

Resumen:

  • Si queremos manipular desde los items podemos hacer uso de las propiedades parecidas a las que vimos como: Justify-Align-Place pero en este caso no ser谩n Item o Content, si no SELF. Estos se coloca en los ITEMS que queremos alinear.
  1. justify-self: // Permite alineas elemento de forma horizontal
.container {
	  background: papayawhip;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  width: 60px;
	}
	
	.item:nth-child(1){ 
	  background: hotpink;
	  justify-self: start; // Indico al elemento que se ubique al comienzo de la grid
	}
  • Una Pseudo clase que nos ayuda a utilizar un elemento o elementos en especifico y no llenarnos de mas clases diferentes, podemos utilizar:
	.item:nth-child(1){ } //Aqu铆 lo que decimos es que podemos utilizar el primer elemento que contenga la clase item.
  • O tambien:
	.item:not(:nth-child(1)){} // Donde especificamos que usaremos todos los elementos de la clase EXCEPTO el primero.
  1. aling-self: // Permite alineas elemento de forma vertical
	.container {
	  background: papayawhip;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  width: 60px;
	  height: 60px; // Es importante definir un alto de la GRID sino no se alineara verticalmente
	}
	
	.item:nth-child(1){ 
	  background: hotpink;
	  aling-self: start; // Indico al elemento que se ubique al comienzo de la GRID
	}
  1. place-self: aling-self / justify-self // Shorthand para definir las 2 anteriores.
.item:nth-child(1){ 
	  background: hotpink;
	  place-self: center stretch; // Primero indico en aling-self y luego al justify-self 
	}

La respuesta al quiz es C

C

La respuesta al quiz es la C 馃槉馃寧鉁

Place-self: center stretch 鈫 C

C

Es: c

place-self: center stretch

Respuesta a las Quiz es la C

De acuerdo a la siguiente imagen, la respuesta es C

La respuesta es la C.

La respuesta ser铆a la opci贸n 芦C禄.

La respuesta es la C, ya que Place-self primero toma el valor vertical y luego el valor horizontal, que en este caso seria鈥 place-self: center stretch;

La respuesta a este Quiz es la letra: C.
La propiedad place-self es un shorthand, es decir un atajo para la alineaci贸n en linea y en bloque.
El primero valor es precisamente para la alineaci贸n en linea, seguido de un / y la alineaci贸n de bloque.

Por lo que鈥

  • center: Alinea de forma centrada al item en la direcci贸n de linea (Vertical).
  • stretch: Trata de estirar al item en la direcci贸n de bloque (Horizaontal).

Interesante el poder usar la propiedad de justify-self en el item para lograr el primer dise帽o.
Dejo el c贸digo por si desean verlo: https://codepen.io/ijcode1/pen/bGqZeZL

La respuesta creo que la respuesta seria la C.

Para mi la C

La respuesta es: C

La respuesta es la C

Quiz = C

La respuesta es C

place-self: center stretch;

La respuesta es: C

La respuesta es la C, porque la propiedad nos dice que alinea de forma vertical / horizontal. Entonces center para vertical y stretch para horizontal que ajusta el tama帽o del item a todo el espacio disponible.

馃
Me gust贸 mucho el uso de pseudoclases para acortar c贸digo y c贸mo utiliza la negaci贸n not (con la pseudoclase entre par茅ntesis) para referirse al resto de elementos.

La respuesta al Quiz es la C:

Porque con la propiedad de place-self: podemos incluir tanto align como justify, entonces align ser铆a center ya que en el block-axis est谩 alineado en el centro y el justify ser铆a stretch que ser铆a que se expande hasta donde puede.

La respuesta es la c, el eje align-self es centrado y luego en el eje justify-self es estirado como viene en predeterminado.

Excelente curso,me gusta estos cursos donde se explican teoricamente los conceptos y fundamentos y luego pasamos a un curso totalmente practico donde aplicamos esos conceptos.

La opci贸n: C

La respuesta correcta es: C

Respuesta Quiz
place-self: center stretch;

Si se les complica acordarse entre align y justify puede aplicar la ABC
Align
Block
Column
Y ya te acuerdas perfecto de que direccion es

La respuesta del quiz es la C
D
place-self: center stretch;

La respuesta es C