I am starting the technical documentation project. I want to start learning CSS grid and flexbox but when I started to sketch my project I realised that the main section is a column with the nav and content section. Each of the 2 main sections contains multiple rows.
I was planning on using nested grids but as the main section is a
1 dimensional column is flexbox more suitable? Even the inner 2 sections are separate 1 dimensional areas that align vertically.
@jermur, I used Grid, but I think in this case, Flexbox will work just as well. I’m also curious to see if others have strong opinions about this either way.
You can use both. Grid for base layout and flex-box for the content. But the “discussion” will be rather abstract without some implementation details.
I decided to go with flexbox and use grid for the portfolio page
here is the codepen link:
https://codepen.io/Jman11/pen/EGLVmx
Flexbox has better browser support than Grid and in general is easier to use. I would definitely go with Flexbox.
As others have said, flexbox has greater browser support than grid currently and for a one dimensional layout I would always use it first. That being said, you can just as easily use grid too and I do like to mix them up and use both!
If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.
Use both, depending on what you need to achieve:
I had a similar question here - in fact what is the difference between grid and flex? After going through both sections in the course, I don’t quite understand the difference and when you would use 1 or the other or both etc. Can you for most cases just get away with using 1? ie grid?
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
So basically…
Use grid if you need a grid-like layout for your divs and use flexboxes if you need your divs to be able to adjust themselves based on the space available on the page.
If you work through the references on the links I gave you’ll get the hang of the problem each tries to solve.
Technically I don’t think there is much, if anything, you can do in Flexbox that you can’t do in Grid (off the top of my head). But some things, like space distribution based on content, are just a little simpler to achieve with Flexbox without having to mess with the grid in ways you might not want to.
Flexbox can be seen as 1 dimensional, or single-axis–oriented. Flexbox works from the content out.
Grid Layout is optimized for 2-dimensional layouts. Grid works from the layout in.
Shockingly the spec actually give a pretty good, human readable, rundown of the two layout models.
More links:
Rachel Andrew cssgrid-ama: What can flexbox do that grid can’t?
MDN: Relationship of grid layout to other layout methods
Google: Flexbox vs Grid
Well, flexbox and grid are both different css, but you can use both of them in the css editor on codepen.