7 replies

Layout Explanation

Hey, i know this is a pretty simple topic for most but sometimes it's a little difficult to grasp the right way to create the sizes of elements for certain layouts in the way it's supposed to be done using grid and flexbox. I know setting fixed widths and heights is bad practice to i'm trying to figure out the most efficient way to do these things. I'll use some images as examples.

In image one of a grid layout, for the sizes of the div squares is it a matter of defining a

max-width

max-width

for the container they're in and stating the sizes using fractional units and percentages in

grid-template-columns/rows

grid-template-columns/rows

etc to get the sizes you need or is it a matter of defining sizes of the divs using width/height?

In image two of a flexbox layout, where let's say one flex item div is larger than another as we can see here, is that a matter of using the

flex

flex

property on the divs or setting the first divs height in percentage to take up more of it's container e.g.

height: 70%;

height: 70%;

In the third image, the little grid of images on the right is done using flexbox. The captions on the left and the images on the right are both in divs wrapped in a flex container with the div on the left having

flex: .6

flex: .6

set on it and the div on the right having

flex: 1;

flex: 1;

set on it. the width of the image box class is

33%

33%

, i can see why this is done as 33 x 3 is 99 so almost 100% of the container allowing the sizes of the boxes to be even with a

flex-wrap: wrap

flex-wrap: wrap

set on the div holding them to bring them to the next level;

Overall i'm just confused on the best way to define these sorts of sizes, like is there a go to method for each flexbox and grid etc? I hope this all makes sense