@Solomonking007
Posted
I think flexbox will work just fine for this project.
Flexbox is best suitable for one-dimensional layouts, like a navigation menu or a gallery of images where the layout needs to adjust from desktop to mobile view. Grid, on the other hand, is a two-dimensional layout module that allows devs to place content in rows and columns. It is best suited for creating complex, multi-dimensional layouts and it enables a precise and consistent layout with rows, columns, and spaces to position and align items better. Both can be used together but ideally Grid should be used for the layout and flexbox can be used for alignment
And REM is relative unit of measurement used to adjust the size of an element based on the ROOT HTML font size, While EM, on the other hand, is a relative unit of measurement used to adjust the size of an element based on the size of its parent. However, REM is usually preferred over EM because it's easier to maintain .
I hope I’m able to help you understand few things.
Marked as helpful
@GerardoCianciulli
Posted
@Solomonking007 thanks for taking the time. grid vs flex is clearer now. as for em vs rem I was hoping for some use cases when to use em as I tend to avoid it out altogether.
@Solomonking007
Posted
@GerardoCianciulli Thanks, I apologize for misunderstanding.
Here are some examples of when to use EM
-
EM can be useful when you have nested elements and you want to set the font size of a child element relative to the parent element's font size. This is particularly useful when you have nested elements, like a list item inside a list.
-
When designing for mobile-first, relative units like EM can be useful. You can set the base font size for your document to 16px and set the font sizes for various elements in EMs, allowing them to scale up or down depending on the screen size.
-
EM units can be used to resize SVG icons and other icons based on the font size of the parent element.
Use cases for REM
-
REM units can make your design more responsive by setting a base font size for your document and using REM units to size other elements, like margins and padding. This ensures consistent spacing between elements that scales nicely with the viewport or screen size.
-
Grid layouts can be more easily achieved using REM units for defining your column widths and row heights. This way, your grid elements will scale relative to the base font size in a consistent and easily maintainable way.
-
And also scalable icons that don't depend on the font-size of the parent element can be more easily implemented using REM units. You can set the width and height of the icon in REM units, and it will scale dynamically with the base font-size of your document.
I think this is all I know for now. I’ll read more about it myself.
Thanks!
Marked as helpful
