CODEWITHSUNDEEP
htmlcsscss-grid
user10993109
user10993109

Reputation:

CSS Grid recreation

Im trying to recreate this grid using CSS Grid using only a table and the row span/column span as well as the cell:nth-child, but I just can't seem to figure it out. I'm just really stuck on this one. I've tried using flexbox as well but I still can't get it to work, Any way someone can help? heres the grid: GRID

.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;
}
<!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>

Upvotes: 2

Views: 71

Answers (3)

JLynchDesigns
JLynchDesigns

Reputation: 157

I'm not sure if it's required to use row/column span, but this is what I came up with?

<!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>

Upvotes: 1

disinfor
disinfor

Reputation: 11533

If the grid stays the same you can try this out:

.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;
}
<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>

This uses the grid-area property to assign elements to the grid.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272807

You can try like below:

td {
  border: 1px solid;
  padding: 40px;
}
<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>

Upvotes: 1

Related Questions