Evaluación buscada para la prueba de habilidad de GRID 2

Indrid_Gomez_Solis · April 24, 2023, 2:37pm

mdn/css-examples/blob/main/learn/tasks/grid/grid2-download.html

<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Grid: task 2</title>

    <link rel="stylesheet" href="../styles.css">

    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

This file has been truncated. show original

No logre realizar esta tarea y me gustaria recibir ayuda

Tarea 2

En esta tarea ya tenemos una grilla definida. Al editar las reglas CSS para los dos elementos secundarios, haga que abarquen varias pistas de cuadrícula cada uno. El segundo elemento debe superponerse al primero como en la imagen a continuación:

mikoMK · April 25, 2023, 9:54am

Hi @Indrid_Gomez_Solis and welcome to the community

First, I recommend to activate grid lines and grid numbers in Firefox Developer Tools. This will help you to get the correct values:

Second, you need to set grid-row and grid-column on both .item1 and .item2 to set their size. See the linked articles to find out how to use these two properties.

Let me know when you need more help or have found a solution.

See you,
Michael