CODEWITHSUNDEEP
htmlcssflexboxcss-grid
johnny
johnny

Reputation: 19735

How do you place elements on a new row, same column with css-grid?

My content is overlapping. I understand it is because I put the same col-start, but how do I get the content divs to go grow and go down the middle of my css-grid? Should I be using flexbox with the grid here? (no Bootstrap please)

Here is what it looks like now:

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}
<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

https://codepen.io/anon/pen/gzmGbQ

I wanted a the content divs to go down the rows each new div, but it needs to start at that column and span that many columns.

Upvotes: 2

Views: 2496

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

You have specifically told all items to occupy the same row (grid-row: 1 / 3). Why not remove that rule? 

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}
.content {
  grid-column: col-start 4 / span 7;
  /* grid-row: 1 / 3; */
}
<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

Upvotes: 1

Related Questions