colocación de elementos
mediante flexbox
y grid
.Utilice el selector CSS de su preferencia para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.
/* Modo de colocar los elementos internos en una rejilla */
display: grid;
/* Separación entre filas */
row-gap: 0.5rem;
/* Separación entre columnas */
column-gap: 0.5rem;
/* Número de columnas: 6 x 1fr */
grid-template-columns: repeat(6, 1fr);
Para las propiedades grid-column y grid-row, en lugar de columna_inicio, columna_final, fila_inicio y fila_final reemplace por los valores que considere necesarios.
grid-column: columna_inicio / columna_final;
grid-row: fila_inicio / fila_final;
Utilice el selector CSS de su preferencia para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.
/* Modo de colocar los elementos internos en una rejilla */
display: grid;
/* Separación entre filas */
row-gap: 0.5rem;
/* Separación entre columnas */
column-gap: 0.5rem;
/* Nombres de las áreas*/
grid-template-areas: "A A A A A A"
"B B B Q Q Q"
"D D E E F F"
"M M M T T T"
Para la propiedad grid-area, en lugar nombre_area coloque el nombre del área de acuerdo con la plantilla.
grid-area: nombre_area;
Utilice el selector CSS de su preferencia para acceder a la etiqueta <main>. Aplique cada una de las siguientes propiedades y valores. Verifique los cambios en el navegador.
/* Modo de colocar los elementos internos de manera flexible */
display: flex;
/* Eje primario con la dirección de los elementos */
flex-direction: row;
/* Separación entre filas */
row-gap: 0.5rem;
/* Separación entre columnas */
column-gap: 0.5rem;
/* Los elementos ocupan el espacio de acuerdo a su tamaño */
flex-wrap: wrap;
/* Los elementos están distribuidos uniformemente en el eje primario */
justify-content: space-between;
/* Los elementos se estiran para llenar el eje transversal */
align-items: stretch;
Para la propiedad flex-basis, reemplace porcentaje por el valor que crea conveniente.
flex-basis: porcentaje%;
/* El espacio restante en el contenedor se distribuirá
equitativamente entre todos los elementos internos */
flex-grow: 1;