Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Empezando el grid

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Grid principal y limitaciones de Flexbox y actividad Empezando el grid

por IsraelBasurtoSanchez
| 141.7k xp | 85 posts
Estudiante 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Grid</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="grid">
        <div class="box">Ruby on Rails</div>
        <div class="box">Java</div>
        <div class="box">HTML</div>
        <div class="box">Python</div>
        <div class="box">Wordpress</div>
        <div class="box">Bootstrap</div>
        <div class="box">Java Web</div>
        <div class="box">MySQL</div>
    </div>

</body>

</html>
.box {
    padding: 10px;
    display: flex;
    margin: 10px;    
    width: 25%;
    font-size: 20px;
    color: #000000;
    background-color: rgb(43, 226, 220);
    justify-content: center;     
  }

  .grid{
    display: flex;
    align-items: center;    
    flex-wrap: wrap;    
}

Saludos.

1 respuesta
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Israelbasurtosanchez!

En el código que compartiste, veo que estás utilizando Flexbox para posicionar tus elementos. Si deseas utilizar Grid en su lugar, deberás agregar algunas propiedades CSS adicionales a tu código.

Primero, deberás agregar la propiedad display: grid; a tu contenedor .grid. Luego, para definir las columnas y filas de tu grid, puedes utilizar las propiedades grid-template-columns y grid-template-rows, respectivamente. Por ejemplo, si deseas que tu grid tenga 3 columnas y 3 filas, puedes agregar lo siguiente a tu código CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px; /* opcional, para agregar espacio entre las cajas */
}

En este caso, estamos utilizando la función repeat() para definir 3 columnas y 3 filas, cada una con un ancho/alto igual (1fr). La propiedad gap nos permite agregar espacio entre las cajas.

Luego, para posicionar tus elementos en el grid, puedes utilizar las propiedades grid-column y grid-row. Por ejemplo, si deseas que la primera caja ocupe las primeras 2 columnas y las primeras 2 filas, puedes agregar lo siguiente a su clase .box:

.box:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

En este caso, estamos utilizando las funciones span y / para indicar que la caja debe ocupar 2 columnas (span 2) a partir de la primera (1) y 2 filas (span 2) a partir de la primera (1).

Espero que esto te ayude a empezar con Grid. ¡Buena suerte! ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)