CSS-only masonry layout

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.

A grid of multiple columns of rectangles of varying height.

Parameters:

All elements have the same width

Elements have a height that cannot be calculated server side (an image plus various amounts of text)

I can live with a fixed number of columns if I have to

there is a trivial solution to this that works in modern browsers, the column-count property.

The problem with that solution is that elements are ordered in columns:

Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.

While I need the elements to be ordered in rows, at least approximately:

Starting from the top leftmost box, they're numbered 1 through 6 straight across, but because box 5 is the shortest the box underneath it is 7 as it has the appearance of being on a row higher than the next box on the far left.

Approaches I've tried that don't work:

Making items display: inline-block: wastes vertical space.

Making items float: left: lol, no.

Now I could change the server side rendering and reorder the items dividing the number of items by the number of columns, but that's complicated, error-prone (based on how browsers decide to split the item list into columns), so I'd like to avoid it if possible.

Is there some newfangled flexbox magic that makes this possible?

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

1

This is a duplicate of stackoverflow.com/questions/37020224/…, but it doesn't have a solution.

– Pekka 웃
Jun 5 '17 at 20:42

5

Can't think of a way that does not depend on predefined heights. If you reconsider JS, have a look at stackoverflow.com/questions/13518653/… where i implement such a solution that is quite simple.

– Gabriele Petrioli
Jun 5 '17 at 22:18

1

@Gaby implementing your solution right now, thank you!

– Pekka 웃
Jul 19 '17 at 18:46

2

I realize that you said CSS-only. I just want to mention that Masonry no longer requires jQuery - the minified library is under 8kb - and can be initialized with html alone. Just for reference jsfiddle.net/wp7kuk1t

– I haz kode
Jul 23 '17 at 16:59

1

If you can determine the height of the elements ahead of time, by knowing the line-height, font-size (you'd have to serve a specific font and do some clever calculations), image height, verticle margin and padding, you can do this. Otherwise, you cannot do this using only CSS. You could also use something like PhantomJS to pre-render each element and get the height of that element, but there would be significant overhead/latency added.

– Timothy Zorn
Jul 25 '17 at 7:28

add a comment |

I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.

A grid of multiple columns of rectangles of varying height.

Parameters:

All elements have the same width

Elements have a height that cannot be calculated server side (an image plus various amounts of text)

I can live with a fixed number of columns if I have to

there is a trivial solution to this that works in modern browsers, the column-count property.

The problem with that solution is that elements are ordered in columns:

Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.

While I need the elements to be ordered in rows, at least approximately:

Approaches I've tried that don't work:

Making items display: inline-block: wastes vertical space.

Making items float: left: lol, no.

Is there some newfangled flexbox magic that makes this possible?

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

1

This is a duplicate of stackoverflow.com/questions/37020224/…, but it doesn't have a solution.

– Pekka 웃
Jun 5 '17 at 20:42

5

Can't think of a way that does not depend on predefined heights. If you reconsider JS, have a look at stackoverflow.com/questions/13518653/… where i implement such a solution that is quite simple.

– Gabriele Petrioli
Jun 5 '17 at 22:18

1

@Gaby implementing your solution right now, thank you!

– Pekka 웃
Jul 19 '17 at 18:46

2

I realize that you said CSS-only. I just want to mention that Masonry no longer requires jQuery - the minified library is under 8kb - and can be initialized with html alone. Just for reference jsfiddle.net/wp7kuk1t

– I haz kode
Jul 23 '17 at 16:59

1

If you can determine the height of the elements ahead of time, by knowing the line-height, font-size (you'd have to serve a specific font and do some clever calculations), image height, verticle margin and padding, you can do this. Otherwise, you cannot do this using only CSS. You could also use something like PhantomJS to pre-render each element and get the height of that element, but there would be significant overhead/latency added.

– Timothy Zorn
Jul 25 '17 at 7:28

add a comment |

I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.

A grid of multiple columns of rectangles of varying height.

Parameters:

All elements have the same width

Elements have a height that cannot be calculated server side (an image plus various amounts of text)

I can live with a fixed number of columns if I have to

there is a trivial solution to this that works in modern browsers, the column-count property.

The problem with that solution is that elements are ordered in columns:

Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.

While I need the elements to be ordered in rows, at least approximately:

Approaches I've tried that don't work:

Making items display: inline-block: wastes vertical space.

Making items float: left: lol, no.

Is there some newfangled flexbox magic that makes this possible?

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.

A grid of multiple columns of rectangles of varying height.

Parameters:

All elements have the same width

Elements have a height that cannot be calculated server side (an image plus various amounts of text)

I can live with a fixed number of columns if I have to

there is a trivial solution to this that works in modern browsers, the column-count property.

The problem with that solution is that elements are ordered in columns:

Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.

While I need the elements to be ordered in rows, at least approximately:

Approaches I've tried that don't work:

Making items display: inline-block: wastes vertical space.

Making items float: left: lol, no.

Is there some newfangled flexbox magic that makes this possible?

html css css3 flexbox css-grid

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

edited Dec 19 '18 at 13:45

BSMP

2,62952536

edited Dec 19 '18 at 13:45

BSMP

2,62952536

edited Dec 19 '18 at 13:45

BSMP

2,62952536

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

asked Jun 5 '17 at 20:41

Pekka 웃

361k1198471018

1

This is a duplicate of stackoverflow.com/questions/37020224/…, but it doesn't have a solution.

– Pekka 웃
Jun 5 '17 at 20:42

5

Can't think of a way that does not depend on predefined heights. If you reconsider JS, have a look at stackoverflow.com/questions/13518653/… where i implement such a solution that is quite simple.

– Gabriele Petrioli
Jun 5 '17 at 22:18

1

@Gaby implementing your solution right now, thank you!

– Pekka 웃
Jul 19 '17 at 18:46

2

I realize that you said CSS-only. I just want to mention that Masonry no longer requires jQuery - the minified library is under 8kb - and can be initialized with html alone. Just for reference jsfiddle.net/wp7kuk1t

– I haz kode
Jul 23 '17 at 16:59

1

If you can determine the height of the elements ahead of time, by knowing the line-height, font-size (you'd have to serve a specific font and do some clever calculations), image height, verticle margin and padding, you can do this. Otherwise, you cannot do this using only CSS. You could also use something like PhantomJS to pre-render each element and get the height of that element, but there would be significant overhead/latency added.

– Timothy Zorn
Jul 25 '17 at 7:28

add a comment |

1

This is a duplicate of stackoverflow.com/questions/37020224/…, but it doesn't have a solution.

– Pekka 웃
Jun 5 '17 at 20:42

5

Can't think of a way that does not depend on predefined heights. If you reconsider JS, have a look at stackoverflow.com/questions/13518653/… where i implement such a solution that is quite simple.

– Gabriele Petrioli
Jun 5 '17 at 22:18

1

@Gaby implementing your solution right now, thank you!

– Pekka 웃
Jul 19 '17 at 18:46

2

I realize that you said CSS-only. I just want to mention that Masonry no longer requires jQuery - the minified library is under 8kb - and can be initialized with html alone. Just for reference jsfiddle.net/wp7kuk1t

– I haz kode
Jul 23 '17 at 16:59

1

If you can determine the height of the elements ahead of time, by knowing the line-height, font-size (you'd have to serve a specific font and do some clever calculations), image height, verticle margin and padding, you can do this. Otherwise, you cannot do this using only CSS. You could also use something like PhantomJS to pre-render each element and get the height of that element, but there would be significant overhead/latency added.

– Timothy Zorn
Jul 25 '17 at 7:28

This is a duplicate of stackoverflow.com/questions/37020224/…, but it doesn't have a solution.

– Pekka 웃
Jun 5 '17 at 20:42

Can't think of a way that does not depend on predefined heights. If you reconsider JS, have a look at stackoverflow.com/questions/13518653/… where i implement such a solution that is quite simple.

– Gabriele Petrioli
Jun 5 '17 at 22:18

@Gaby implementing your solution right now, thank you!

– Pekka 웃
Jul 19 '17 at 18:46

I realize that you said CSS-only. I just want to mention that Masonry no longer requires jQuery - the minified library is under 8kb - and can be initialized with html alone. Just for reference jsfiddle.net/wp7kuk1t

– I haz kode
Jul 23 '17 at 16:59

If you can determine the height of the elements ahead of time, by knowing the line-height, font-size (you'd have to serve a specific font and do some clever calculations), image height, verticle margin and padding, you can do this. Otherwise, you cannot do this using only CSS. You could also use something like PhantomJS to pre-render each element and get the height of that element, but there would be significant overhead/latency added.

– Timothy Zorn
Jul 25 '17 at 7:28

add a comment |

1 Answer
1

active

oldest

votes

111

+500

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).

The container expands horizontally, not vertically (like the Pinterest layout).

It requires the container to have a fixed height, so the items know where to wrap.

As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)

The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)

The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.

With grid-row and span we're telling grid items how many rows they should span across.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)

Firefox - full support as of March 6, 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 current spec; supports obsolete version

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

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

4

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

1

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44377343%2fcss-only-masonry-layout%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

111

+500

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).

The container expands horizontally, not vertically (like the Pinterest layout).

It requires the container to have a fixed height, so the items know where to wrap.

As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)

The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)

The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.

With grid-row and span we're telling grid items how many rows they should span across.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)

Firefox - full support as of March 6, 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 current spec; supports obsolete version

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

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

4

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

1

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

|
show 1 more comment

111

+500

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).

The container expands horizontally, not vertically (like the Pinterest layout).

It requires the container to have a fixed height, so the items know where to wrap.

As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)

The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)

The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.

With grid-row and span we're telling grid items how many rows they should span across.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)

Firefox - full support as of March 6, 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 current spec; supports obsolete version

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

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

4

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

1

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

|
show 1 more comment

111

+500

111

+500

111

+500

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).

The container expands horizontally, not vertically (like the Pinterest layout).

It requires the container to have a fixed height, so the items know where to wrap.

As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)

The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)

The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.

With grid-row and span we're telling grid items how many rows they should span across.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)

Firefox - full support as of March 6, 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 current spec; supports obsolete version

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

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout.

`row wrap`

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.

`column wrap`

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

Flex items flow vertically, not horizontally (like you need in this case).

The container expands horizontally, not vertically (like the Pinterest layout).

It requires the container to have a fixed height, so the items know where to wrap.

As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

^{source: http://masonry.desandro.com/}

How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...

^{source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS:

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

jsFiddle demo

How it works

Establish a block-level grid container. (inline-grid would be the other option)

The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn't apply to the area between items and the container.)

The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout's flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It's comparable to flexbox's flex-grow property.

With grid-row and span we're telling grid items how many rows they should span across.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)

Firefox - full support as of March 6, 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 current spec; supports obsolete version

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

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

grid-container {

  display: grid;                                                /* 1 */

  grid-auto-rows: 50px;                                         /* 2 */

  grid-gap: 10px;                                               /* 3 */

  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */

}



[short] {

  grid-row: span 1;                                             /* 5 */

  background-color: green;

}



[tall] {

  grid-row: span 2;

  background-color: crimson;

}



[taller] {

  grid-row: span 3;

  background-color: blue;

}



[tallest] {

  grid-row: span 4;

  background-color: gray;

}



grid-item {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.3em;

  font-weight: bold;

  color: white;

}

<grid-container>

  <grid-item short>01</grid-item>

  <grid-item short>02</grid-item>

  <grid-item tall>03</grid-item>

  <grid-item tall>04</grid-item>

  <grid-item short>05</grid-item>

  <grid-item taller>06</grid-item>

  <grid-item short>07</grid-item>

  <grid-item tallest>08</grid-item>

  <grid-item tall>09</grid-item>

  <grid-item short>10</grid-item>

  <grid-item tallest>etc.</grid-item>

  <grid-item tall></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item taller></grid-item>

  <grid-item short></grid-item>

  <grid-item tallest></grid-item>

  <grid-item tall></grid-item>

  <grid-item short></grid-item>

</grid-container>

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

edited Dec 19 '18 at 13:47

BSMP

2,62952536

edited Dec 19 '18 at 13:47

BSMP

2,62952536

edited Dec 19 '18 at 13:47

BSMP

2,62952536

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

answered Jul 19 '17 at 21:03

Michael_B

158k50255363

4

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

1

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

|
show 1 more comment

4

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

1

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

Fantastic answer! With the "CSS Grid with item dimensions defined" solution, is it possible to express the height of a cell as a percentage of the cell width? This would be useful for displaying images, where the aspect ratio is known. We want to maintain the aspect ratio at all times.

– Oliver Joseph Ash
Jan 3 '18 at 16:27

Thanks. With respect to the aspect ratio issue for images, the "percentage of cell width" method (the percentage padding trick?), it is not reliable in Grid, or Flexbox, for that matter. See here and here. @OliverJosephAsh

– Michael_B
Jan 3 '18 at 16:34

Yes, I am referring to the percentage padding trick. Is it possible to use any of the workarounds in combination with your masonry layout solution? For context, we are looking to implement a CSS only masonry layout for the images on unsplash.com.

– Oliver Joseph Ash
Jan 3 '18 at 16:50

@OliverJosephAsh, the percentage padding trick, used with grid / flex items, fails in Firefox (and possibly other browsers). See the link references in my previous comment for the reasons. I would say JS is currently the safest route.

– Michael_B
Jan 3 '18 at 17:04

Unfortunately using JS for this is not an option. We want to enable server side rendering for performance and SEO reasons. This means the layout must be rendered before client-side JavaScript has downloaded, parsed, and executed. Given this seems to be impossible, I guess we'll have to make a trade off somewhere along the line! Thanks for your help :-)

– Oliver Joseph Ash
Jan 3 '18 at 17:19

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Category

Random preview