CODEWITHSUNDEEP
htmlcsscss-grid
mdaneels
mdaneels

Reputation: 13

How can you make a grid in a grid using css?

My problem here is that in the third item of the first container (grid-1-item-3), I want to create another grid to place 3 items in it, next to each other with a width of 33.33%. The 3 items should fill up the whole second container (container-2/grid-1-item-3).The colors are just there to make it easy to see what's happening.

.container-1{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0px;
  justify-content: auto;
  align-content: auto;
}
.grid-1-item{
  width: 100%;
  height: 100px;
  background-color: blue;
  border: 5px solid red;
}
.container-2{
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0px;
}
.grid-2-item{
  width: 33.33%;
  height: 50%;
  background-color: black;
  border: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>
<body>
  <header>
    <div class="container-1">
      <div class="grid-1-item" class="grid-1-item-1"></div>
      <div class="grid-1-item" class="grid-1-item-2"></div>
      <div class="grid-1-item" class="grid-1-item-3" class="container-2">
        <div class="grid-2-item" class="grid-2-item-1"></div>
        <div class="grid-2-item" class="grid-2-item-2"></div>
        <div class="grid-2-item" class="grid-2-item-3"></div>
      </div>
      <div class="grid-1-item" class="grid-1-item-4"></div>
      <div class="grid-1-item" class="grid-1-item-5"></div>
      <div class="grid-1-item" class="grid-1-item-6"></div>
      <div class="grid-1-item" class="grid-1-item-7"></div>
      <div class="grid-1-item" class="grid-1-item-8"></div>
      <div class="grid-1-item" class="grid-1-item-9"></div>
    </div>
  </header>
</body>

</html>

Upvotes: 0

Views: 39

Answers (3)

Charles Lavalard
Charles Lavalard

Reputation: 2321

You can add grid-template-columns: repeat(3, 1fr); to your subgrid

.container-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0px;
  justify-content: auto;
  align-content: auto;
}

.grid-1-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100px;
  background-color: blue;
  border: 5px solid red;
}

.grid-2-item {
  background-color: black;
  border: 1px solid white;
}
<div class="container-1">
  <div class="grid-1-item grid-1-item-1"></div>
  <div class="grid-1-item grid-1-item-2"></div>
  <div class="grid-1-item grid-1-item-3">
    <div class="grid-2-item grid-2-item-1"></div>
    <div class="grid-2-item grid-2-item-2"></div>
    <div class="grid-2-item grid-2-item-3"></div>
  </div>
  <div class="grid-1-item grid-1-item-4"></div>
  <div class="grid-1-item grid-1-item-5"></div>
  <div class="grid-1-item grid-1-item-6"></div>
  <div class="grid-1-item grid-1-item-7"></div>
  <div class="grid-1-item grid-1-item-8"></div>
  <div class="grid-1-item grid-1-item-9"></div>
</div>

Upvotes: 0

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I think it can help you.

.container-1{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0px;
  justify-content: auto;
  align-content: auto;
}
.grid-1-item{
  width: 100%;
  height: 100px;
  background-color: blue;
  border: 5px solid red;
}
.container-2{
  display: grid;
  grid-template-columns: auto auto auto;
}
.grid-2-item{
  width: 100%;
  height: 50%;
  background-color: black;
  border: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>
<body>
  <header>
    <div class="container-1">
      <div class="grid-1-item grid-1-item-1"></div>
      <div class="grid-1-item grid-1-item-2"></div>
      <div class="grid-1-item grid-1-item-3 container-2">
        <div class="grid-2-item grid-2-item-1"></div>
        <div class="grid-2-item grid-2-item-2"></div>
        <div class="grid-2-item grid-2-item-3"></div>
      </div>
      <div class="grid-1-item grid-1-item-4"></div>
      <div class="grid-1-item grid-1-item-5"></div>
      <div class="grid-1-item grid-1-item-6"></div>
      <div class="grid-1-item grid-1-item-7"></div>
      <div class="grid-1-item grid-1-item-8"></div>
      <div class="grid-1-item grid-1-item-9"></div>
    </div>
  </header>
</body>

</html>

Upvotes: 0

Sco
Sco

Reputation: 759

<div class="container-1">
  <div class="grid-1-item grid-1-item-1"></div>
  <div class="grid-1-item grid-1-item-2"></div>
  <div class="grid-1-item grid-1-item-3 container-2">
    <div class="grid-2-item grid-2-item-1"></div>
    <div class="grid-2-item grid-2-item-2"></div>
    <div class="grid-2-item grid-2-item-3"></div>
  </div>
  <div class="grid-1-item grid-1-item-4"></div>
  <div class="grid-1-item grid-1-item-5"></div>
  <div class="grid-1-item grid-1-item-6"></div>
  <div class="grid-1-item grid-1-item-7"></div>
  <div class="grid-1-item grid-1-item-8"></div>
  <div class="grid-1-item grid-1-item-9"></div>
</div>

no duplicate class= in same tag

Upvotes: 1

Related Questions