Make a div span two rows in a grid

by

You have fixed heights on your child elements (.block). Based on that information, we can extrapolate the height of the container (#wrapper).

By knowing the height of the container, your layout can be achieved using CSS Flexbox with flex-direction: column and flex-wrap: wrap.

A fixed height on the container serves as a breakpoint, telling flex items where to wrap.

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}
<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

Here’s an explanation why flex items can’t wrap unless there’s a fixed height/width on the container: https://stackoverflow.com/a/43897663/3597276

More Related Contents:

  1. Equal height rows in CSS Grid Layout
  2. How can I make a div span multiple rows and columns in a grid?
  3. Prevent content from expanding grid items
  4. Flex-box: Align last row to grid
  5. Aligning grid items across the entire row/column (like flex items can)
  6. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  7. How to make the items in the last row consume remaining space in CSS Grid?
  8. A grid layout with responsive squares
  9. Create a Masonry grid with flexbox (or other CSS)
  10. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  11. Can flex items wrap in a container with dynamic height?
  12. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  13. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  14. How to create one vertical column in between rows in Flexbox [closed]
  15. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  16. Chrome / Safari not filling 100% height of flex parent
  17. What are the differences between flex-basis and width?
  18. Equal width flex items even after they wrap
  19. Make flex-grow expand items based on their original size
  20. CSS grid – maximum number of columns without media queries
  21. How to align left last row/line in multiple line flexbox [duplicate]
  22. How to keep wrapped flex-items the same width as the elements on the previous row?
  23. What are the differences between flex-grow and width?
  24. Padding-bottom/top in flexbox layout
  25. Make flex items overlap
  26. Create a row of flexbox items with a max height defined by one child [duplicate]
  27. CSS Grid auto fit with max-content
  28. How can I create multi columns from a single unordered list?
  29. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  30. What exactly flex-basis property sets?

Leave a Comment