Summary
Keywords
Full Transcript
Nota: Lean el primer comentario, en el minuto 21:07 hay un pequeño error en los parámetros. En este video, les voy a mostrar de forma detallada cómo utilizar CSS Grid, una potente técnica de maquetación en CSS que permite crear diseños flexibles y complejos de manera eficaz. Exploraremos paso a paso cómo definir una cuadrícula, establecer filas y columnas, y colocar elementos en ella. Vamos a ver cómo se utiliza la propiedad "display: grid" para crear un contenedor de cuadrícula y cómo definir tamaños y espaciado de filas y columnas utilizando "grid-template-rows" y "grid-template-columns". Además, aprenderán a colocar elementos en la cuadrícula utilizando propiedades como "grid-row" y "grid-column" de forma precisa. También, exploraremos las propiedades "grid-gap" y "grid-template-areas" para lograr diseños más complejos y visualmente atractivos. A lo largo de este video, resolveremos problemas comunes que puedan surgir al trabajar con CSS Grid y compartiremos consejos útiles. Con esta guía completa, podrán dominar la técnica de CSS Grid y utilizarla de manera efectiva para crear diseños web sofisticados y adaptativos. ¡Espero que les resulte de gran utilidad! 00:00 - Intro 00:44 - ¿Cómo crear un contenedor en CSS Grid? 01:56 - ¿Cómo definir filas y columnas en CSS Grid? 02:41 - ¿Cómo utilizar repeat en CSS Grid? 04:04 - ¿Cómo utilizar min-content y max-content en CSS Grid? 05:30 - ¿Cómo utilizar fr en CSS Grid? 06:38 - ¿Cómo asignar nombres a las lineas en CSS Grid? 09:16 - ¿Cómo definir areas en CSS Grid? 11:31 - ¿Cómo utilizar grid-template en CSS Grid? 12:42 - ¿Cómo utilizar la propiedad gap en CSS Grid? 13:19 - ¿Cómo alinear elementos en CSS Grid? 14:20 - ¿Cómo alinear el contenedor en CSS Grid? 15:15 - ¿Cómo utilizar grid-auto-rows y grid-auto-columns en CSS Grid? 16:26 - ¿Cómo utilizar grid-auto-flow en CSS Grid? 17:32 - ¿Cómo utilizar la propiedad grid en CSS Grid? 20:39 - ¿Cómo utilizar justify-self, align-self y place-self en CSS Grid? 21:44 - ¿Cómo utilizar grid-column-start y grid-column-end en CSS Grid? 22:02 - ¿Cómo utilizar grid-row-start y grid-row-end en CSS Grid? 22:34 - ¿Cómo utilizar grid-column y grid-row en CSS Grid? 22:57 - ¿Cómo utilizar grid-area en CSS Grid?
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
