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

Responsive y CSS Grid

27/28
Recursos

Aportes 43

Preguntas 2

Ordenar por:

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

Les dejo esta web para saber su medida de pantalla y las mas utilizadas, asi podemos nosotros ver cuales son las que nos conviene para crear los breakpoints
MyDevice.io
![](
![](

No se si es solo en mi caso pero me parece que el curso dejo mucho que desear, o esta mal nombrado, deberia llamarse Fundamentos de CSS Grid, también debido a que el proyecto fue muy flojo
Necesitamos otro curso en el que se programe de inicio a fin una pagina web interesante con CSS Grid para que podamos aprender en la practica las distintas herramientas y no solo un numero infinito de slides

Saludos, les comparto mi versión del proyecto. Ya incluye diseño responsivo.
Link

Para no estar cambiando el font size dependiendo el dispositivo, puede agregar este codigo, la fuente por defecto es 1rem = 16px , al aplicar el codigo re-define la fuente a 1rem = 10px como default, entonces ahora pueden usar matematica basica, necesitas 12px? entonces 1.2rem, necesitas 20px? entonces 2rem , etc, y como usa el root como inicio, se adapta al root del dispositivo en uso.

Les hace la vida mas facil

html {
  font-size: 62.5%;
}
	

Me quede con ganas de que Teff en este punto explique, al menos tener su diseño con dos medidas para mostrar algo práctica, ahora no se como encarar mi proyecto, no se si con los clasicos mediaqueries o hay algo nuevo con css grid para el respnsive.
En este video hubiese preferido algo así.

Mi proyecto es:

Me gustaria poder al menos armar uno abajo del otro en columnas de ancho completo, para por lo menos no se pierda nada. Pero saber como es viable hacer eso.

Hola, comparto mi versión del proyecto.

Yo quiero dejar mi muestra de lo que hice utilizando Css grid

Espero les agrade

Y asi quedo
Talvez no quedo 100% Exacto pero me encanto como quedo

Les dejo una extensión de chrome que está increíble para hacer responsive, da la vista de la web que estamos trabajando desde varios tamaños de dispositivos. Y es compatible con Live Server de VSCode.
CHrome: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=es
Firefox: https://addons.mozilla.org/es/firefox/addon/multi-responsive-viewer/

📲 Responsive y CSS Grid

<h4>Ideas/conceptos claves</h4>

Las media queries (en español “consultas de medios”) son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

<h4>Apuntes</h4>
  • Existe una gran variedad de dispositivos con diferentes tamaños de pantalla
  • Debemos establecer los puntos de inicio y final
    • Establecer el público, para determinar estos valores
  • Es crucial tener un rango de pixeles para trabajar (min: 360px - max: 414px)
  • Para aplicar los diseños usaremos la media queries
  • Para usar CSS Grid con reglas responsive es recomendable usar
    • Auto fill ⇒ Llena el contenido con todo el contenido posible
    • Auto fit ⇒ Encaja las columnas disponibles en un espacio disponible

Nice

Muchas dispositivas y poco código

Me quede con las ganas de que se explique en código, con un ejemplo más claro
😦

No supe como subir un gif en los comentarios, pero les dejo un link en el que pueden verlo, le puse un breackpoint al proyecto para que no e viera tan distorsionado 😃
https://imgur.com/dWzATb4

Les recomiendo esta herramienta https://blisk.io/ este es un navegador para desarrolladores web y te permite seleccionar los diferentes modelos de teléfonos, tablet, laptop y pc e ir mirando en tiempo real lo que va sucediendo en cada una de las versiones 👩🏻‍💻

Para poner en práctica algunos conceptos aprendidos en este curso, decidí hacer la siguiente práctica:
https://jorgemacper.github.io/layoutgridfrontend/practica/index.html

No conocía nada de grid y ahora le veo un gran potencial

Así quedo mi proyecto:

Dos recomendaciones:

Un excelente curso, lo disfrute de principio a fin, hay que resaltar muchos puntos pero uno que no hay que dejar pasar es el de la documentación, gracias por crear estos cursos.

Hola buenas, solo para mencionarle a los futuros estudiantes del curso. Denle una leída a la documentación que dejo la maestra en github, pues algunas preguntas salen de ahí

Asi me quedo mi página:
** Desktop **

** Mobile **

no creo que este bien decir diseño responsivo, suena como raro jajajaa, prefiero decir desiño responsive

Excelente curso le pusieron mucho empeño. Con esto ya me puedo defender con grid layout. De los mejores cursos que he visto de platzi

Comparto mi proyecto

Este es mi proyecto con responsive y todo…
https://brandon328.github.io/BaG/

Con la función de auto-fit() ADAPTA las columnas DISPONIBLES ACTUALMENTE en el espacio expandiéndolas para que ocupen cualquier espacio disponible. El navegador hace eso después de LLENAR ese espacio adicional con columnas adicionales (como con el autocompletar) y luego colapsar las vacías.

Con la función de auto-fill() LLENA la fila con tantas columnas como pueda caber. Por lo tanto, crea columnas implícitas cada vez que cabe una nueva columna, porque está tratando de LLENAR la fila con tantas columnas como sea posible. Las columnas recién agregadas pueden estar vacías, pero seguirán ocupando un espacio designado en la fila.

ya lo pase, pero me vine por el ultimo a ver que se dice 😎

El reto dice 😂😂😂

Hay mucho material para practicar, con todos los conceptos que vimos será realmente más sencillo seguir videos así, retos y comenzar a aplicar todo.
https://www.youtube.com/watch?v=QBOUSrMqlSQ
No entiendo las quejas, el curso te da todo lo necesario y no es simplemente hacer código y copiar…

A final de cuentas creo que dependeria del estilo de la pagina web ver si se crea todo con grid o se lo va haciendo por secciones ya que si la pagina es mas “artistica” es decir que tenga una linea por un lado un recuadro por otro, una imagen no necesariamente centrada, contenedores sobrepuestos es bastante util colocarle una grilla completa a toda la pagina, mientras que si la pagina maneja cierta estructura se deberia irla realizando por secciones (header, body, footer, etc) y dentro de estas secciones manejarse de acuerdo a las necesidades

Buen curso. Su proposito de enseñár los conceptos los cumple.

Cabe mencionar que en tamaños de texto es recomendable usar medidas em o rem para responsive

Como practica final, elegí analizar según lo visto en clases la grid de la pagina de “mi crédito” de liverpool.
En cuestión de ubicar los elementos, me quedo muy claro la forma de hacerlo, en realidad de eso se trató esta practica.
Posteriormente veré lo de agregar textos, links y todo el contenido para simular ser la página real.

  1. Análisis de grid principal.
  1. Definir el contenedor
  1. Generar el grid del contenedor y empezar a ubicar los elementos. Se me hizo mas fácil colocar los elementos con la propiedad grid-area.
  1. Resultado, use la herramienta del inspector de elementos para visualizar la grid creada y poder asignar las áreas de manera mas rápida.

Este es Mi proyecto

MOVIL

DESKTOP

CODIGO:

@media screen and (max-width: 427px) {
  .container {
    min-width: 320px;
  }
  .item-1 {
    grid-column: 2 / 9;
    grid-row: 10 / 11;
  }
  .item-2 {
    grid-column: 2 / 4;
    grid-row: 9 / 11;
  }
  .item-3 {
    grid-column: 1 / 6;
    grid-row: 6 / 8;
  }
  .item-4 {
    grid-column: 4 / 7;
    grid-row: 5 / 7;
  }
  .item-5 {
    grid-column: 3 / 9;
    grid-row: 4 / 8;
  }
  .item-6 {
    grid-column: 4 / 10;
    grid-row: 8 / 9;
  }
  .item-7 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .item-8 {
    grid-column: 3 / 7;
    grid-row: 3 / 4;
    writing-mode: horizontal-tb;
    transform: rotate(360deg);
  }
}

m

No se como pasar la imagen de pantalla de mi computador y subirlo a aquí?

Thanks. 💚

recuerden utilizar las DevTools si estan en chrome pueden ajustar el tamaño de la pantalla, para probar diferentes tamaños de pantallas le dan click en el icono del telefono arriba a la derecha y con la barra de que sale en la parte superior van cambiando los tamaños dependiendo del dispositivo que escojan
Para abrir las DevTools es con F12