Notas de lectura
CSS Grid: Como y cuando utilizarlo (Css medio)
- Institución
- Desarrollo De Aplicaciones Web
Aprendemos con estos apuntes a utilizar correctamente y vemos cuando utilizar CSS Grid, con todo tipo de propiedades y demás.
[Mostrar más]Vista previa 2 fuera de 8 páginas
Vista previa 2 fuera de 8 páginas
Añadir al carritoVendedor
Seguir
Vista previa del contenido
CSS GridGrid en CSS es un sistema de diseño que permite crear y organizar elementos en
una página web mediante una cuadrícula o rejilla. Con Grid, puedes controlar el tamaño,
la posición, la alineación y el espacio entre los elementos, y crear diseños responsivos
que se adapten a diferentes dispositivos y tamaños de pantalla.
Para usar Grid, debes definir un contenedor padre con la propiedad display: grid y
luego especificar las columnas y las filas de la cuadrícula con las propiedades grid-
template-columns y grid-template-rows. Los elementos hijos del contenedor se colocarán
automáticamente en las celdas de la cuadrícula, o puedes asignarles una posición
específica con las propiedades grid-column y grid-row.
Aquí tienes un ejemplo básico de cómo usar Grid en CSS:
/* Define el contenedor padre como una cuadrícula */
.container {
display: grid;
/* Define tres columnas de igual tamaño */
grid-template-columns: repeat(3, 1fr);
/* Define dos filas de 100px y 200px respectivamente */
grid-template-rows: 100px 200px;
/* Define un espacio de 10px entre las celdas */
gap: 10px;
}
/* Coloca los elementos hijos en la cuadrícula */
.item-1 {
/* Ocupa la primera columna y la primera fila */
grid-column: 1;
grid-row: 1;
}
.item-2 {
/* Ocupa la segunda y tercera columna y la primera fila */
grid-column: ;
grid-row: 1;
}
.item-3 {
/* Ocupa la primera columna y la segunda fila */
grid-column: 1;
grid-row: 2;
}
.item-4 {
/* Ocupa la segunda y tercera columna y la segunda fila */
grid-column: ;
grid-row: 2;
}
, La unidad de medida fr en CSS es una unidad relativa que representa una fracción
del espacio disponible en un contenedor. Se utiliza principalmente en el diseño de
cuadrículas o rejillas con Grid Layout, para definir el tamaño de las columnas y las filas de
manera proporcional. Por ejemplo, si se define una cuadrícula con tres columnas y se
asigna 1fr a cada una, significa que cada columna ocupará un tercio del ancho del
contenedor. Si se asigna 2fr a una columna y 1fr a las otras dos, significa que la primera
columna ocupará el doble de espacio que las otras dos. La ventaja de usar fr es que no se
necesita hacer cálculos matemáticos para definir el tamaño de las columnas o filas, sino
que se deja que el navegador distribuya el espacio de forma automática y flexible.
.container {
display: grid;
/* Define tres columnas de igual tamaño */
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
/* Coloca los elementos en la cuadrícula */
.item-1 {
/* Ocupa la primera columna y la primera fila */
grid-column: 1;
grid-row: 1;
}
.item-2 {
/* Ocupa la segunda columna y la primera fila */
grid-column: 2;
grid-row: 1;
}
.item-3 {
/* Ocupa la tercera columna y la primera fila */
grid-column: 3;
grid-row: 1;
}
.item-4 {
/* Ocupa la primera columna y la segunda fila */
grid-column: 1;
grid-row: 2;
}
.item-5 {
/* Ocupa la segunda columna y la segunda fila */
grid-column: 2;
grid-row: 2;
}
.item-6 {
/* Ocupa la tercera columna y la segunda fila */
grid-column: 3;
grid-row: 2;
}
Este código creará un grid de 3x2 con 6 elementos que ocuparán el mismo espacio.
Los beneficios de comprar resúmenes en Stuvia estan en línea:
Garantiza la calidad de los comentarios
Compradores de Stuvia evaluaron más de 700.000 resúmenes. Así estas seguro que compras los mejores documentos!
Compra fácil y rápido
Puedes pagar rápidamente y en una vez con iDeal, tarjeta de crédito o con tu crédito de Stuvia. Sin tener que hacerte miembro.
Enfócate en lo más importante
Tus compañeros escriben los resúmenes. Por eso tienes la seguridad que tienes un resumen actual y confiable. Así llegas a la conclusión rapidamente!
Preguntas frecuentes
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
100% de satisfacción garantizada: ¿Cómo funciona?
Nuestra garantía de satisfacción le asegura que siempre encontrará un documento de estudio a tu medida. Tu rellenas un formulario y nuestro equipo de atención al cliente se encarga del resto.
Who am I buying this summary from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller enriquebrizuela. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy this summary for 5,35 €. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
45,681 summaries were sold in the last 30 days
Founded in 2010, the go-to place to buy summaries for 14 years now