CODEWITHSUNDEEP
csscss-grid
Mritunjay Upadhyay
Mritunjay Upadhyay

Reputation: 1094

Unequal number of grid items in row in grid container using css grid

enter image description here

How can I make the following using css grid. I want all five box as children of parent container.

Upvotes: 0

Views: 592

Answers (3)

Temani Afif
Temani Afif

Reputation: 273551

Here is another idea with less of code:

.grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-gap: 20px;
  width: 70%;
  margin: 50px auto;
}

.grid  > * {
  border: 1px solid black;
  padding: 10px;
}

.full-width {
  grid-column: span 3
}
<div class="grid">
  <div class="full-width"></div>
  <div class="full-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
</div>

Upvotes: 2

Mritunjay Upadhyay
Mritunjay Upadhyay

Reputation: 1094

For reference: this css tricks blog.

grid-column property take start line and end line or start line and span value. So the idea is to make three column and give first two item full width.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  width: 70%;
  margin: 50px auto;
}

.full-width, .one-third-width {
  border: 1px solid black;
  padding: 10px;
}

.full-width {
  grid-column: 1 / 4
}
<div class="grid">
  <div class="full-width"></div>
  <div class="full-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
</div>

Upvotes: 0

Arundeep Chohan
Arundeep Chohan

Reputation: 9969

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
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;
}

.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
.item2{
grid-column-start: 1;
grid-column-end: 4;
}

</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
<div class="item5">5</div>

</div>

</body>
</html>

So something like this?

Upvotes: 2

Related Questions