Este documento presenta los conceptos básicos de CSS Grid. Explica cómo crear un contenedor de cuadrícula y colocar elementos dentro de él usando filas y columnas. También describe varias propiedades importantes como grid-template-columns, grid-template-rows, justify-content y align-content que permiten controlar el diseño de la cuadrícula. Finalmente, incluye algunos enlaces a recursos adicionales sobre CSS Grid.
Las slides de mi charla impartida en Codemotion, el 19 de noviembre de 2016. Introducción al módulo de CSS Grid Layout, ¿cómo implementar un grid?¿qué navegadores lo soportan?. El código con los ejemplos aplicados pueden visitarse en: http://codepen.io/collection/XRGPzK/
El documento describe el sistema de cuadrícula Bootstrap que permite diseñar páginas web de forma responsiva. El sistema utiliza 12 columnas y diferentes clases para controlar el ancho de las columnas dependiendo del tamaño de la pantalla, y es flexible para crear diseños dinámicos. También explica las reglas básicas para utilizar el sistema de cuadrícula como el uso de filas y contenedores.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
El documento explica el sistema de retícula (grid system) para el diseño web. Un grid system divide el espacio de diseño en columnas y filas para facilitar la composición. Los beneficios incluyen una mejor organización de la información, mayor control sobre la composición de página y un diseño más consistente entre páginas. El documento describe cómo utilizar clases como container_12, grid_4 y push_3 para implementar un grid system de 12 columnas y controlar el ancho y posicionamiento de los elementos.
Las slides de mi charla impartida en Codemotion, el 19 de noviembre de 2016. Introducción al módulo de CSS Grid Layout, ¿cómo implementar un grid?¿qué navegadores lo soportan?. El código con los ejemplos aplicados pueden visitarse en: http://codepen.io/collection/XRGPzK/
El documento describe el sistema de cuadrícula Bootstrap que permite diseñar páginas web de forma responsiva. El sistema utiliza 12 columnas y diferentes clases para controlar el ancho de las columnas dependiendo del tamaño de la pantalla, y es flexible para crear diseños dinámicos. También explica las reglas básicas para utilizar el sistema de cuadrícula como el uso de filas y contenedores.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
El documento explica el sistema de retícula (grid system) para el diseño web. Un grid system divide el espacio de diseño en columnas y filas para facilitar la composición. Los beneficios incluyen una mejor organización de la información, mayor control sobre la composición de página y un diseño más consistente entre páginas. El documento describe cómo utilizar clases como container_12, grid_4 y push_3 para implementar un grid system de 12 columnas y controlar el ancho y posicionamiento de los elementos.
Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.
Este documento presenta consejos para escribir CSS de manera más eficiente y mantenible. Recomienda usar preprocesadores como Sass para dividir el CSS en piezas más pequeñas y reutilizables, y seguir metodologías como OOCSS y BEM. También enfatiza la importancia de comentarios, nombres consistentes y documentación para facilitar la colaboración entre desarrolladores.
El documento describe las principales características de CSS y CSS3. CSS es un lenguaje que trabaja con HTML para dar estilo y diseño a los elementos de una página web, como colores, fuentes, bordes y posicionamiento. CSS3 introduce nuevas propiedades para transformaciones, transiciones y efectos visuales que anteriormente requerían JavaScript. El documento explica diferentes métodos de referencia en CSS, el modelo de caja tradicional, y varias propiedades nuevas en CSS3 como sombras, gradientes, fuentes personalizadas y transformaciones.
Este documento proporciona una introducción a las tecnologías web de cliente CSS. Explica los principios básicos de CSS, su historia y evolución, el lenguaje CSS básico, diferentes tipos de selectores, cómo relacionar HTML y CSS mediante la cascada, y varias propiedades de estilo como tipografía, posicionamiento y fondo.
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...Fellyph Cintra
CSS en los últimos años, fuera de la red CSS, no trajo muchos desarrollos nuevos. Pero en el último año, aparecieron decenas de nuevas funcionalidades para CSS abriendo una nueva posibilidad para diseñar aplicaciones web. Y WordPress no se quedó fuera de estas nuevas funcionalidades.
¿Cómo afectan las nuevas características como las consultas de contenedores, las capas, la subcuadrícula y :has() al desarrollo de temas de WordPress? En esta charla descubrirás cómo.
Simulemos nuestras situaciones del día a día, viendo cómo podemos beneficiarnos de estas nuevas funciones.
Flexbox y Grid: Los mejores amigos del maquetadorMauricio Gelves
Este documento describe las ventajas de usar Flexbox y CSS Grid para el diseño de páginas web. Explica los problemas del pasado como el uso excesivo de tablas HTML, divisiones y Flash. Luego introduce Flexbox y CSS Grid, describiendo sus características principales como justificar el contenido, alinear elementos y crear diseños de cuadrícula. Finalmente anima a los asistentes a aprender, diagramar y maquetar usando estas poderosas herramientas.
Implementación de Grafos Ponderados, haciendo uso de Programación Orientado a Objetos (POO), que en esta oportunidad se realizó bajo la plataforma de Java, y usando NetBeans como entorno de desarrollo.
Este documento resume conceptos clave de CSS como CSS3, diseño web responsive, SASS, LESS y CSS orientado a objetos. Brevemente describe las características principales de CSS3 como bordes, transformaciones, fondos múltiples y gradientes. También cubre selectores avanzados de CSS3, animaciones, transiciones y media queries. Finalmente, introduce conceptos como diseño web responsive, preprocesadores como SASS y LESS, y el enfoque de CSS orientado a objetos.
Este documento describe conceptos básicos de programación web como el modelo de cajas en CSS, clases e identificadores CSS, y pseudoclases CSS. Explica que cada elemento HTML se representa como una caja rectangular y que CSS permite modificar sus características como contenido, relleno, borde, fondo e imagen. También describe cómo las clases y los identificadores permiten aplicar estilos CSS a elementos, y que las pseudoclases especifican estados como hover.
¿Sabes el ciclo de vida de un Layout?, ¿qué opciones de Layout son más óptimas?, ¿cómo afectan los bindings al rendimiento y como tratarlos?, ¿rendimiento en listados?, ¿fast renderers?. A todas esas preguntas y a otras tantas, intentaremos dar solución en esta sesión.
Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Este documento describe las capas en HTML y cómo se pueden usar para organizar y diseñar páginas web. Las capas son divisiones que se pueden posicionar y solapar para crear diseños complejos. Se pueden crear capas usando las etiquetas <div>, <span> o <layer> y establecer sus propiedades como posición, tamaño, índice y visibilidad a través del atributo style.
Ciencia de redes con R: Una introducción al universo de paquetes para ciencia...Software Guru
Esta plática puede dar respuesta a las siguientes preguntas ¿qué tipo de problemas podemos atacar con ciencia de redes?, ¿qué limitaciones podemos encontrar?
Este documento proporciona información sobre el diseño de sitios web y el uso de tablas, etiquetas HTML5, hojas de estilo en cascada (CSS), diseño responsivo y medios queries. Recomienda usar tablas para datos y no para diseño, evitar tablas anidadas, y que las actualizaciones de sitios son costosas. Además, explica nuevas etiquetas HTML5 como <header>, <footer>, <nav> y <section>, y cómo enlazar hojas de estilo CSS externas e internas y usar medios queries para diseño adaptable a
Este documento resume las diferencias entre bases de datos relacionales y NoSQL, y presenta Microsoft Azure Table Storage y MongoDB como alternativas NoSQL. Explica los fundamentos, diseño y programación de cada uno, así como escenarios de uso comunes y una evaluación de costes.
Las etiquetas HTML <FRAMSET> dividen una página web en ventanas independientes con bordes y barras de desplazamiento propios, cargando páginas externas en cada una. Los atributos COLS y ROWS definen el número y tamaño de las filas y columnas de los marcos. SRC especifica la página que se cargará en cada marco y BORDERCOLOR establece el color de los bordes.
Las etiquetas HTML <FRAMSET> dividen una página web en ventanas independientes con bordes y barras de desplazamiento propios, cargando páginas externas en cada una. Los atributos COLS y ROWS definen el número y tamaño de las filas y columnas de los marcos. SRC especifica la página que se cargará en cada marco y BORDERCOLOR establece el color de los bordes.
El documento presenta una introducción a ASP.NET MVC Core, comparándolo con MVC5. Explica que MVC Core mantiene el mismo modelo de desarrollo que MVC5, con vistas, controladores y acciones. También describe algunas diferencias clave como los Tag Helpers, View Components y la unificación de MVC y WebAPI. El documento incluye varios demos para ilustrar estas características.
Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.
Este documento presenta consejos para escribir CSS de manera más eficiente y mantenible. Recomienda usar preprocesadores como Sass para dividir el CSS en piezas más pequeñas y reutilizables, y seguir metodologías como OOCSS y BEM. También enfatiza la importancia de comentarios, nombres consistentes y documentación para facilitar la colaboración entre desarrolladores.
El documento describe las principales características de CSS y CSS3. CSS es un lenguaje que trabaja con HTML para dar estilo y diseño a los elementos de una página web, como colores, fuentes, bordes y posicionamiento. CSS3 introduce nuevas propiedades para transformaciones, transiciones y efectos visuales que anteriormente requerían JavaScript. El documento explica diferentes métodos de referencia en CSS, el modelo de caja tradicional, y varias propiedades nuevas en CSS3 como sombras, gradientes, fuentes personalizadas y transformaciones.
Este documento proporciona una introducción a las tecnologías web de cliente CSS. Explica los principios básicos de CSS, su historia y evolución, el lenguaje CSS básico, diferentes tipos de selectores, cómo relacionar HTML y CSS mediante la cascada, y varias propiedades de estilo como tipografía, posicionamiento y fondo.
CSS 2022: un mundo completamente nuevo - Presentacion WC Pontevedra - Fellyph...Fellyph Cintra
CSS en los últimos años, fuera de la red CSS, no trajo muchos desarrollos nuevos. Pero en el último año, aparecieron decenas de nuevas funcionalidades para CSS abriendo una nueva posibilidad para diseñar aplicaciones web. Y WordPress no se quedó fuera de estas nuevas funcionalidades.
¿Cómo afectan las nuevas características como las consultas de contenedores, las capas, la subcuadrícula y :has() al desarrollo de temas de WordPress? En esta charla descubrirás cómo.
Simulemos nuestras situaciones del día a día, viendo cómo podemos beneficiarnos de estas nuevas funciones.
Flexbox y Grid: Los mejores amigos del maquetadorMauricio Gelves
Este documento describe las ventajas de usar Flexbox y CSS Grid para el diseño de páginas web. Explica los problemas del pasado como el uso excesivo de tablas HTML, divisiones y Flash. Luego introduce Flexbox y CSS Grid, describiendo sus características principales como justificar el contenido, alinear elementos y crear diseños de cuadrícula. Finalmente anima a los asistentes a aprender, diagramar y maquetar usando estas poderosas herramientas.
Implementación de Grafos Ponderados, haciendo uso de Programación Orientado a Objetos (POO), que en esta oportunidad se realizó bajo la plataforma de Java, y usando NetBeans como entorno de desarrollo.
Este documento resume conceptos clave de CSS como CSS3, diseño web responsive, SASS, LESS y CSS orientado a objetos. Brevemente describe las características principales de CSS3 como bordes, transformaciones, fondos múltiples y gradientes. También cubre selectores avanzados de CSS3, animaciones, transiciones y media queries. Finalmente, introduce conceptos como diseño web responsive, preprocesadores como SASS y LESS, y el enfoque de CSS orientado a objetos.
Este documento describe conceptos básicos de programación web como el modelo de cajas en CSS, clases e identificadores CSS, y pseudoclases CSS. Explica que cada elemento HTML se representa como una caja rectangular y que CSS permite modificar sus características como contenido, relleno, borde, fondo e imagen. También describe cómo las clases y los identificadores permiten aplicar estilos CSS a elementos, y que las pseudoclases especifican estados como hover.
¿Sabes el ciclo de vida de un Layout?, ¿qué opciones de Layout son más óptimas?, ¿cómo afectan los bindings al rendimiento y como tratarlos?, ¿rendimiento en listados?, ¿fast renderers?. A todas esas preguntas y a otras tantas, intentaremos dar solución en esta sesión.
Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Este documento describe las capas en HTML y cómo se pueden usar para organizar y diseñar páginas web. Las capas son divisiones que se pueden posicionar y solapar para crear diseños complejos. Se pueden crear capas usando las etiquetas <div>, <span> o <layer> y establecer sus propiedades como posición, tamaño, índice y visibilidad a través del atributo style.
Ciencia de redes con R: Una introducción al universo de paquetes para ciencia...Software Guru
Esta plática puede dar respuesta a las siguientes preguntas ¿qué tipo de problemas podemos atacar con ciencia de redes?, ¿qué limitaciones podemos encontrar?
Este documento proporciona información sobre el diseño de sitios web y el uso de tablas, etiquetas HTML5, hojas de estilo en cascada (CSS), diseño responsivo y medios queries. Recomienda usar tablas para datos y no para diseño, evitar tablas anidadas, y que las actualizaciones de sitios son costosas. Además, explica nuevas etiquetas HTML5 como <header>, <footer>, <nav> y <section>, y cómo enlazar hojas de estilo CSS externas e internas y usar medios queries para diseño adaptable a
Este documento resume las diferencias entre bases de datos relacionales y NoSQL, y presenta Microsoft Azure Table Storage y MongoDB como alternativas NoSQL. Explica los fundamentos, diseño y programación de cada uno, así como escenarios de uso comunes y una evaluación de costes.
Las etiquetas HTML <FRAMSET> dividen una página web en ventanas independientes con bordes y barras de desplazamiento propios, cargando páginas externas en cada una. Los atributos COLS y ROWS definen el número y tamaño de las filas y columnas de los marcos. SRC especifica la página que se cargará en cada marco y BORDERCOLOR establece el color de los bordes.
Las etiquetas HTML <FRAMSET> dividen una página web en ventanas independientes con bordes y barras de desplazamiento propios, cargando páginas externas en cada una. Los atributos COLS y ROWS definen el número y tamaño de las filas y columnas de los marcos. SRC especifica la página que se cargará en cada marco y BORDERCOLOR establece el color de los bordes.
El documento presenta una introducción a ASP.NET MVC Core, comparándolo con MVC5. Explica que MVC Core mantiene el mismo modelo de desarrollo que MVC5, con vistas, controladores y acciones. También describe algunas diferencias clave como los Tag Helpers, View Components y la unificación de MVC y WebAPI. El documento incluye varios demos para ilustrar estas características.
Buscador de Eventos y Fiestas en España - Buscafiestaholabuscafiesta
Buscafiesta.es es el buscador líder en España para fiestas y eventos, diseñado para satisfacer las necesidades tanto de organizadores como de asistentes. Este innovador software ofrece una plataforma integral que permite a los organizadores de eventos añadir, gestionar y promocionar sus actividades de manera totalmente autónoma, facilitando la visibilidad y escalabilidad de sus eventos.
Buscafiesta.es no solo conecta a los organizadores con su público objetivo, sino que también ofrece herramientas de marketing y análisis que ayudan a maximizar el impacto de cada evento. Ya sea para una fiesta local, un concierto multitudinario o un evento corporativo, Buscafiesta.es es la solución definitiva para hacer de cada evento un éxito rotundo.
6. ¿Qué es CSS Grid?
CSS Grid es una muy buena opción para estructurar, organizar y diseñar los
elementos de nuestro sitio web, ofreciéndonos un sistema de disposición apropiado
de forma nativa en el navegador.
En CSS solemos utilizar múltiples propiedades para estructurar nuestros sitio web,
utilizando inline-block, float, relative o hasta flexbox que sólo utiliza una
dimensión.
El módulo CSS Grid entra en acción ofreciéndonos un sistema de filas y columnas en
dos dimensiones, y total libertad de los ítems para organizar nuestros contenido a
gusto.
¿Y donde queda el Responsive Design? Con CSS Grid podemos definir filas y
columnas como también redefinirlas a nuestro gusto dentro de un media query.
7. CSS Grid | ¿Flexbox vs CSS Grid?
CSS Grid puede convivir con Flexbox. No se trata de tecnologías excluyentes,
sino complementarias.
8. CSS Grid
El módulo de diseño de CSS Grid ofrece un sistema de diseño basado en
cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin
tener que usar flotadores y posicionamiento. +info
9. ● Grid Container: es nuestro elemento “padre”, donde se asigna un
{display:grid;} y nos permitirá colocar otras propiedades para manipular
nuestro diseño.
● Grid Item: son los hijos directos de nuestro container. Estos los
manejaremos a nuestra voluntad, nuestras filas y columnas que
moveremos a nuestro gusto.
● Grid Line: son las líneas divisorias horizontales y verticales.
● Grid Track: es el espacio entre dos líneas adyacentes. Filas y columnas.
● Grid Cell: nuestras celdas serán el espacio entre dos filas adyacentes y 2
columnas adyacentes.
● Grid Area: espacio rodeado por 4 grid lines.
CSS Grid | Conceptos básicos
11. CSS Grid | Display
Un elemento HTML se transforma en un contenedor de grilla cuando tiene
su propiedad display seteada en grid o inline-grid:
.grid-container{
display: grid;
}
.grid-container{
display: inline-grid;
}
Ejemplo Ejemplo
12. CSS Grid | Grid Items
Se pueden referenciar por fila o por columna, aunque no es la única forma.
13. CSS Grid | Grid Gaps
Es el espacio entre los ítems. Se pueden ajustar los tamaños de gap con las
siguientes propiedades: grid-column-gap; grid-row-gap y grid-gap.
Ejemplo column-gap
Ejemplo row-gap
Ejemplo grid-gap
14. CSS Grid | Grid Lines
Para colocar un grid-ítem en un contenedor se referencian los números de
línea:
.item{
grid-column-start: 1;
grid-column-end: 3;
}
.item{
grid-row-start: 1;
grid-row-end: 3;
}
Pone un grid item en la línea
de la columna 1, que finaliza
en la línea de la columna 3.
Pone un grid item en la línea
de la fila 1, que finaliza en la
línea de la fila 3.
Ejemplo Ejemplo
15. CSS Grid | Propiedades
Propiedad Descripción
column-gap Especifica el espacio entre las columnas. +info
gap Propiedad abreviada. Espacio entre filas y entre columnas .+info
grid Propiedad abreviada. Filas y columnas, de la cuadrícula, áreas de la cuadrícula, filas y
columnas automáticas y propiedades de flujo automático de cuadrícula. +info
grid-area Especifica un nombre para el elemento de la cuadrícula. Es una propiedad abreviada
para grid-row-start, grid-column-start, grid-row-end y grid-column-end. +info
grid-auto-columns Especifica un tamaño de columna predeterminado. +info
grid-auto-flow Determina cómo se insertan los elementos en la cuadrícula. +info
grid-auto-rows Especifica un tamaño de fila predeterminado. +info
16. CSS Grid | Propiedades (continuación)
Propiedad Descripción
grid-column Una propiedad abreviada para las propiedades grid-column-start y
grid-column-end. +info
grid-column-end Especifica dónde termina el elemento de la cuadrícula. +info
grid-column-gap Especifica el tamaño del espacio entre columnas. +info
grid-column-start Especifica dónde comienza el elemento de la cuadrícula. +info
grid-gap Una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap.
+info
grid-row Una propiedad abreviada para las propiedades grid-row-start y grid-row-end. +info
grid-row-end Especifica dónde termina el elemento de la cuadrícula. +info
grid-row-gap Especifica el tamaño del espacio entre filas. +info
17. CSS Grid | Propiedades (continuación)
Propiedad Descripción
grid-row-start Especifica dónde comienza el elemento de la cuadrícula. +info
grid-template Una propiedad abreviada para las propiedades de las filas de plantilla de
cuadrícula, columnas de plantilla de cuadrícula y áreas de cuadrícula. +info
grid-template-areas Especifica cómo mostrar columnas y filas, utilizando elementos de cuadrícula
con nombre. +info
grid-template-columns Especifica el tamaño de las columnas y cuántas columnas en un diseño de
cuadrícula. +info
grid-template-rows Especifica el tamaño de las filas en un diseño de cuadrícula. +info
row-gap Especifica el espacio entre las filas de la cuadrícula. +info
18. CSS Grid | Grid Container
Para que un elemento HTML se comporte como un contenedor de
cuadrícula, debemos establecer la propiedad display en grid (cuadrícula) o
inline-grid (cuadrícula en línea). Los contenedores de cuadrícula consisten
en elementos de cuadrícula, colocados dentro de columnas y filas.
19. CSS Grid | Grid Container
Este es el código que genera el cuadro de la diapositiva anterior:
EsEste
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
.grid-container {
width: 800px;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.grid-container > div {
background-color: lightblue;
text-align: center;
font-size: 20px;
height: 40px;
}
20. CSS Grid | grid-template-columns
La propiedad grid-template-columns define el número de columnas (y el
ancho) de la cuadrícula. Se colocan los valores separados por espacios, y cada
uno define el ancho de la columna respectiva. Se pueden establecer anchos
en px, unidades relativas o %, aunque es recomendable utilizar la medida fr.
/*Medidas en px:*/
grid-template-columns: 300px 200px 400px;
21. CSS Grid | grid-template-columns
/*Medidas en %:*/
grid-template-columns: 50% 35% 15%;
/*Medida automática:*/
grid-template-columns: auto auto auto;
Si una cuadrícula de 4 columnas tiene más de 4 elementos, se agrega
automáticamente una nueva fila para colocar los elementos extra.
22. CSS Grid | grid-template-columns
La unidad especial de Grid fr (fraction) representa una fracción de espacio
restante en el grid.
Unidad fracción restante (fr):
grid-template-columns: 0.5fr 2fr 1fr;
23. CSS Grid | grid-template-columns
Se puede utilizar la expresión repeat() para indicar repetición de valores,
indicando el número de veces que se repiten y el tamaño en cuestión.
La expresión a utilizar es la siguiente:
repeat([núm de veces], [valor o valores]):
La expresión repeat():
grid-template-columns: repeat(3, 1fr);
24. CSS Grid | grid-template-rows
La propiedad grid-template-rows define la altura de cada fila.
El valor es una lista separada por espacios, donde cada valor define el alto de
la fila respectiva.
grid-template-rows: 80px 200px;
25. CSS Grid | Propiedad justify-content
La propiedad justify-content se utiliza para alinear toda la cuadrícula dentro
del contenedor. El ancho total de la cuadrícula debe ser menor que el ancho
del contenedor para que la propiedad tenga efecto.
space-evenly
space-around
space-between
center
start
end
26. CSS Grid | Propiedad align-content
La propiedad align-content se usa para alinear verticalmente toda la
cuadrícula dentro del contenedor. La altura total de la cuadrícula debe ser
menor que la altura del contenedor para que tenga efecto.
center space-evenly
27. CSS Grid | Propiedad align-content
space-around space-between
start
end
28. CSS Grid | Propiedad grid-area
La propiedad grid-area especifica el tamaño y la ubicación de un elemento
de cuadrícula en el diseño, y es una propiedad abreviada para las siguientes
propiedades: grid-row-start, grid-column-start, grid-row-end y
grid-column-end.
La grid-area también se puede utilizar para asignar un nombre a un
elemento de la cuadrícula. Y se puede hacer referencia a los elementos de
cuadrícula con nombre mediante la propiedad grid-template-areas del
contenedor de cuadrícula. +info
29. CSS Grid | Ejemplos de grid-area
Caso 1: el área ocupa una columna.
Caso 2: el área ocupa un grupo de celdas en horizontal.
30. CSS Grid | Ejemplos de grid-area
Caso 3: el área ocupa un grupo de celdas en vertical.
Caso 4: esquema básico de página Web, con 6 columnas y 3 filas.
31. CSS Grid | Ejemplo
En este enlace se puede ver cómo crear un pequeño proyecto con CSS Grid.
33. Artículos de interés
Documentación sobre CSS Grid:
https://lenguajecss.com/css/maquetacion-y-colocacion/grid-css/
https://www.w3schools.com/css/css_grid.asp
https://www.w3schools.com/css/css_grid_container.asp
https://www.w3schools.com/css/css_grid_item.asp
https://www.w3schools.com/cssref/pr_grid-area.asp
Principios básicos del diseño con Grid
Material multimedia:
CSS Grid desde cero
CSS GRID Página Web Responsive
35. Tarea para el Proyecto:
● En función de la distribución (layout) elegida para el proyecto
utilizar Grid para maquetar el contenido principal (main) de las
páginas del sitio.