2
votes

Récréation CSS Grid

J'essaie de recréer cette grille en utilisant CSS Grid en utilisant uniquement une table et la plage de lignes / de colonnes ainsi que la cellule: nth-child, mais je n'arrive tout simplement pas à le comprendre. Je suis juste vraiment coincé sur celui-ci. J'ai également essayé d'utiliser Flexbox mais je n'arrive toujours pas à le faire fonctionner. Quelqu'un peut-il m'aider? voici la grille:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>CSS Grid 2</title>
        <meta name="description" content="CSS Grid">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="cssgrid2.css">
    </head>
    <body>

        <div class="table">

            <div class="cell">
                <img src="img/forest.jpg">
            </div>

            <div class="cell">
                <img src="img/snow.jpg">
            </div>

            <div class="cell">
                    <img src="img/winter.jpg">
            </div>
    

            <div class="cell">
                <img src="img/eclipse.jpg">
            </div>

            <div class="cell"></div>

         <div class="cell">        
                <img src="img/moon.jpg">
            </div>

            <div class="cell">
                <img src="img/trees.jpg">
            </div>

            


        </div>

.table {
    margin: auto; 
    margin-top: 40px;
    display: grid;
    width: 50%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}

.cell {
    border: 1px  solid;
    border-color:#000;
    margin: 10px; 
    height: 200px;
}

.cell img {
    object-fit: cover;
    width: 100%;
    height: 200px; 
}


.cell:nth-child(2){
    grid-column: span 2;
}

html css css-grid

0 commentaires

3 Réponses :

1
votes

Vous pouvez essayer comme ci-dessous:

<table>
  <tr>
    <td>
    </td>
    <td rowspan="2" colspan="2">
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td style="width:100px">
    </td>
    <td rowspan="2">
    </td>
  </tr>
  <tr>
    <td colspan="2">
    </td>
  </tr>
</table>

td {
  border: 1px solid;
  padding: 40px;
}

0 commentaires

0
votes

Si la grille reste la même, vous pouvez essayer ceci:

<div class="table">

  <div class="cell">
    <img src="img/forest.jpg">
  </div>

  <div class="cell">
    <img src="img/snow.jpg">
  </div>

  <div class="cell">
    <img src="img/winter.jpg">
  </div>


  <div class="cell">
    <img src="img/eclipse.jpg">
  </div>

  <div class="cell"></div>

  <div class="cell">
    <img src="img/moon.jpg">
  </div>

  <div class="cell">
    <img src="img/trees.jpg">
  </div>

</div>

.table {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "a b b b" "c b b b" "d e e f" "g g g f";
}

.cell:nth-child(1) {
  grid-area: a;
  background: red;
}

.cell:nth-child(2) {
  grid-area: c;
  background: blue;
}

.cell:nth-child(3) {
  grid-area: b;
  background: yellow;
}

.cell:nth-child(4) {
  grid-area: d;
  background: teal;
}

.cell:nth-child(5) {
  grid-area: e;
  background: green;
}

.cell:nth-child(6) {
  grid-area: g;
  background: purple;
}

.cell:nth-child(7) {
  grid-area: f;
  background: black;
}

Ceci utilise la propriété grid-area pour affecter des éléments à la grille.

0 commentaires

1
votes

Je ne sais pas s'il est nécessaire d'utiliser l'étendue des lignes / colonnes, mais c'est ce que j'ai proposé?

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: tree; }
.item2 { grid-area: building; }
.item3 { grid-area: leaf; }
.item4 { grid-area: diner; }
.item5 { grid-area: city; }
.item6 { grid-area: empty; }
.item7 { grid-area: bridge; }

.grid-container {
  display: grid;
  grid-template-areas:
    'tree leaf leaf leaf'
    'building leaf leaf leaf'
    'diner empty empty bridge'
    'city city city bridge';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">Tree</div>
  <div class="item2">Building</div>
  <div class="item3">Leaf</div>  
  <div class="item4">Diner</div>
  <div class="item5">City</div>
  <div class="item6">Empty</div>
  <div class="item7">Bridge</div>
</div>

</body>
</html>

0 commentaires