Clever Geek Handbook

Flexbox order of tiles with variable width

I have a grid of fragments that I need to display.

Article slabs can fit 4 per line.

Videos can fit 2 in a row.

The problem I am facing is this: line with article, article, article, video. The video will move to the next line.

Or an article, video, video. Again, the second video falls on the next line.

Setting the order property seems painful because the order in which articles / videos are displayed is completely random. Is there a way to handle this issue using flexbox?

Here's the fiddle - https://jsfiddle.net/nx4ap9u4/ (in this case I'm trying to have 2 blue boxes and a green box on the first line, 4 blue boxes on the second line without me to set the order with CSS or JS)

.blog-feeder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.article-preview.grid {
  flex-grow: 1;
  flex-basis: 25%;
  width: auto;
  margin-right: 15px;
  background: blue;
  height: 300px;
}

.article-preview.grid.post_VIDEO {
  flex-basis: 50%;
  background: green;
}
      

        
        
        
      

    
<div class="blog-feeder">
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
</div>
Run codeHide result


+3


source to share


1 answer


This kind of layout algorithm goes beyond flexbox. Items in a flex container cannot be automatically redirected to fill a row.

However, this feature is available in another CSS3 technology, Grid Layout .

The "dense" property wrapping algorithm grid-auto-flow

automatically arranges grid items to fill white space in a row.

From the specification:

7.7. Automatic placement: grid-auto-flow

Property

Grid items that are explicitly placed are automatically placed in unallocated space in the grid container by an automatic placement algorithm.

grid-auto-flow

controls how the auto-placement algorithm works by specifying exactly how the auto-placed items fall into the grid.

dense

If specified, the auto-placement algorithm uses a "dense" packing algorithm that tries to fill holes earlier in the mesh if smaller items appear later. This can result in out-of-line items as it fills the holes left by larger items.

.blog-feeder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  grid-gap: 10px;
  padding: 10px;
}

.article-preview.grid {
  grid-column-end: span 1;
  background: blue;
}

.article-preview.grid.post_VIDEO {
  grid-column-end: span 2;
  background: green;
}
      

        
        
        
      

    
<div class="blog-feeder">
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
</div>
Run codeHide result


modified demo



This is how it works:

  • The item .blog-feeder

    becomes the container of the grid with display: grid

    .

  • The property grid-template-columns

    sets the grid to four columns, each of which has a width 1fr

    that is an equal distribution of the available space. (It is similar to flex-grow: 1

    flexbox.)

  • No cells are specified. But any lines created automatically by the grid (aka implicit lines) will be 100px high. (Used to be 300px height on flex items in source code. For demonstration purposes only.)

  • The property grid-auto-flow

    specifies the layout algorithm. dense

    will take elements from the source order, if necessary, to fill in the blanks.

  • The property grid-gap

    sets the space between elements (gutters). This property only works between elements; it does not affect the space between items and the container.

So far, all commands are set at the container level. This differs from flexbox, where many similar commands have to be set on flex items.

  • In the grid items themselves, the value span

    in the property grid-column-end

    tells each item how many columns should be closed.

Browser support for CSS grid

  • Chrome - Full support as of 8 March 2017 (version 57)
  • Firefox - Full support as of 6 March 2017 (version 52)
  • Safari - Full support as of March 26, 2017 (version 10.1)
  • Edge - Full support as of October 16, 2017 (version 16)
  • IE11 - no support for the current specification; supports outdated version

Here's the complete picture: http://caniuse.com/#search=grid

+2


source






More articles:


All Articles