Html Question posted in
Some basic documentation can be found here.

Html – Creating a grid with template areas

im trying to build a layout of colored blocks for an exercise but i dont see how to get it done. for now i have 6 rows of blocks the same size. however, the next div called violet i would want to be the full width and 4 rows as size. this is how i want it to be: Layout

Here is the html + css code right now. it should be done with grid template areas but i cant really manage how to use them the right way.

body, html {
    height: 100vh;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 800px;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 15px;
}

.container div {
    border-radius: 20px;
}

.red {
    background-color: rgb(199, 48, 48);
}

.lightblue {
    background-color: rgb(55, 207, 245);
}

.lightgreen {
    background-color: greenyellow;
}

.blue {
    background-color: rgb(35, 35, 121);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Grid</title>
</head>
<body>
    <div class="container">
        <!-- Row 1 -->
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
        <!-- Row 2 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 3 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 4 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 5 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 6 -->
        <div></div>
        <div></div>
        <div class="blue"></div>
        <div class="blue"></div>

    </div>
</body>
</html>

Anyone has an idea on how to get it done that involves it being built mainly by grid template areas? Would be appreciated!

Tags:

2

Answers


  1. 0

    Personally i use https://cssgrid-generator.netlify.app/ , give it a try, it is usefull !

    Login or Signup to reply.
  2. 0

    You can specify each grid element in its place using grid-template / grid-area.
    Or you can simply "extend" div.purple with grid-column:

    .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 600px;
}

.grid div {
  aspect-ratio: 1;
  border-radius: 12px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.lightblue {
  background-color: lightblue;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
  grid-column: span 4;
  grid-row: span 4;
}

.orange {
  background-color: orange;
}
    <div class="grid">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="green"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="green"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="green"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="lightblue"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="purple"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search