Ask HN: Can you only do this with FLEXBOX and not GRID in CSS?

https://news.ycombinator.com/item?id=20844667

by thinkloop • 7 years ago

2 2 7 years ago

news.ycombinator.com

Two boxes side-by-side (horizontally), one of them twice the width of the other, that then become laid out vertically at 100% width when the browser width is reduced: https://jsfiddle.net/dgn2cvaf/

Is this also possible with grid?

surewhynat• 7 years ago

There are many css grid solutions, I would recommend looking at bootstrap, bulma, materialize for examples.

Essentially most of them are comprised of a grid broken down into 12 columns. For your example in bulma the following would render the same:

<div class="columns is-multiline"> <div class="column is-two-thirds">bigger</div> <div class="column is-one-third">smaller</div> </div>

The way it works in the CSS is @media queries which specify how to handle the object widths at various screen widths.

In your example, your min-width is the only thing creating the scaffolding effect. When you fill in your elements with content you may notice them behave unexpectedly.

Also, this may have been more of a stackoverflow question.

triptych• 7 years ago

Media queries?

Ask HN: Can you only do this with FLEXBOX and not GRID in CSS?

Related Stories