Box Layout In Reusable Components for Mobile App Development

Hello everyone, I am Ahmad. It's my second post and my first post about React. Here's my thought:

How I design the layout of react.js app?

Before, I always use anything convenient to make all elements fit the screen. I use grid, flex, and absolute positioning anywhere without rules.

But recently I stuck to this rule( especially for mobile development ):

Grid for layout and flex for reusable components positioning

Grid for Layout

You can use one column grid layout for group-box of components in general. Then you can specify the inner layout of a group-box, if there is a horizontal( read: grid-column ) layout or even a vertical( grid-row ) layout.

Alternatively you can combine vertical and horizontal layout using grid-span or grid-template-areas. Just do what convenient to your app.

/* Template_Example: css */
.view  { display: grid; grid-template-rows: 1fr 2fr 9fr 3fr; }
.modal { display: grid; grid-template-rows: 1fr 2fr 2fr 3fr; }
.nav   { display: grid; grid-template-columns:  1fr 1fr 1fr; }
.control {
  display: grid;
  grid-template-areas: "left right" "left right" "footer footer";
}

Flex for Component Positioning

I wrapped every small component or composite component in a box( div ), and add flexbox to the box so we could positioning its content relative to the box.

/* Component_Pattern */
function Component(props) {
  return (
    <div className={props.boxClass}>
      <ChildComponent  />
    </div>
  )
}

See picture below, I made nine flex class for component positioning from top-left to bottom-right. It doesn't have to be all nine, it depend on your app.

/* Template_Example: css */
.f1 { display: flex; justify-content: flex-start; align-items: flex-start; }
.f2 { display: flex; justify-content: center;     align-items: flex-start; }
.f3 { display: flex; justify-content: flex-end;   align-items: flex-start; }
.f4 { display: flex; justify-content: flex-start; align-items: center;     }
.f5 { display: flex; justify-content: center;     align-items: center;     }
.f6 { display: flex; justify-content: flex-end;   align-items: center;     }
.f7 { display: flex; justify-content: flex-start; align-items: flex-end;   }
.f8 { display: flex; justify-content: center;     align-items: flex-end;   }
.f9 { display: flex; justify-content: flex-end;   align-items: flex-end;   }

Here's an example in CodePen.

That's it. Feel free to leave a comment below.

Edit:
Actually There's a better solution for better readability (minimize div usage) using Grid only and place-self property. Check this [article]

CSS Grid Cheat Sheet Illustrated in 2021🎖️

Joy Shaheb ・ Mar 4 ・ 5 min read

#css #webdev #beginners #tutorial

on place-self section. By using place-self, flexbox for positioning won't be necessary.