Ejercicios de práctica de CSS

Ejercicio 17

Crea una cuadrícula en CSS Grid con cuatro columnas y dos filas, coloca seis elementos y cambia la dirección para que el orden visual sea del 6 al 1.

Lo resolví del siguiente modo:

CSS:

                .grid-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: repeat(2, 100px);
                    gap: 10px;
                }

                .grid-item {
                    background-color: #007BFF;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                }

                .grid-item:nth-child(1) { order: 6; }
                .grid-item:nth-child(2) { order: 5; }
                .grid-item:nth-child(3) { order: 4; }
                .grid-item:nth-child(4) { order: 3; }
                .grid-item:nth-child(5) { order: 2; }
                .grid-item:nth-child(6) { order: 1; }
            

HTML:

                <div class="grid-container">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>