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 106

Preguntas 4

Ordenar por:

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

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 ‘justify’ que utiliza el ‘inline-axis’, el width (ancho) del elemento debe estar definido. Para ‘align’ que utiliza el ‘block-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 “heredados” 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 “place-self” ya que es la abreviación para “justify-self” (horizontal) y “align-self” (vertical): entonces va “center” + “stretch” (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 “C”

place-self: center stretch;

La respuesta seria la C

place-self: center stretch

Según lo que yo hice, la respuesta es la “C”.

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 ‘center’ decimos que queremos el elemento centrado en el axis vertical, y con stretch que tome como el espacio disponible en el axis horizontal.

La respuesta es: La C. Yo pensaba que era la B, pero solo se estaría alineando de manera verticalpero no ocuparía todo el espacio horizontal que tendría. Por eso el valor de "stretch" en la segunda posicion aplicaria en la parte horizontal, basicamente para que ocupe todo ese espacio sobrante
![](https://static.platzi.com/media/user_upload/image-34492dc4-1a8f-4e14-9c33-d9daabe26ea1.jpg)
La opcion C, place-self: center stretch

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 “C”

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