#Page layout best practice?

5 messages · Page 1 of 1 (latest)

tame hinge
#

I observed different strategies for how create a solo project layout. Some folks use plenty of divs with padding/margins to try to match the Figma. Others use padding within a container to place a flex and then use flex gap to control the spacing / vertical layout between elements

Example | Live code https://scrimba.com/fullstack-path-c0fullstack/~09t/s0mog4vr2t/head

.converter {
height: 285px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 32px 50px;
}

What is your strategy / best practice to layout a page like this?

image.png
Solo Project (PRO) - Unit converter
glossy skiff
#

Hi, @tame hinge . Nice to meet you
I think this is better.

.converter{
width: min-content;
height: 285px;
align-items: center;
padding: 32px 50px;
margin: auto;
}

#

What do you think?

tame hinge
#

Thanks for the suggestion @glossy skiff

The suggested CSS has a couple of issues

  • width: min-content will shrink the container to its smallest possible width, which could cause text wrapping or cramped layouts
  • margin: auto only centers the container horizontally (not its contents)
  • Missing display: flex, so align-items: center won't work as intended
  • No spacing control between child elements

so it won't accomplish the level of layout control required.

green gazelle