A few tips for working with layout formats – Part 1

Tram Ho

Hi everyone, today I’m going to do some layout examples that we often see.

The Backend brothers often say ” it’s easy to force, just remember some HTML tags with CSS attribute put into it, huh … ” and that sentence is for those who just graduated, but Dev guys No one ever said that. If you are a Frontend Developer, the tasks related to Markup UI must have experienced many types of layout, especially building landing pages or user interaction web. Such websites are very interesting because their eye-catching interface and flying effect make me more happy than working with boring data table layout. However, with nice layouts it has a high level of complexity in building and maintaining, so it is essential to come up with a constructive idea before the code.

This article or maybe the following will be a series of series to share about common layout types.

1. Layout multi row with flex

Typically, flex is known to build a layout when it is a row or column. In case there are many items on a row, to stretch the elements evenly and stick to both sides you will use justify-content: space-between . However, this method will have disadvantages not used for cases of multiple rows. Let me show you an example.

Where row has an empty item, the above condition will occur. So I will use the following trick to layout to be able to stretch the items that are just used for multiple rows.

Implementation ideas:

  • List wrapped items with flex
  • For this example, I will give 3 item trên 1 row . Each item with width - 10px => 3(item) * 10px = 30px will be empty at 30px distance.
  • Except for the last item, every previous item (here are 2 items) of 1 row will have margin-right = 30px / 2 = 15px .

Quite simply, you can also apply it to the number of items per row more. You can also watch the demo here: https://codepen.io/nguyenhuukhuyenudn/details/WNvzoGv

2. Layout change position avatar responsive

Another type of layout, which is the type of layout when on the PC will display in 2 columns, one side is the avatar and the other is content. When responsive on smaller screens, the avatar will fit between the title and desciption . To make it easier to imagine, you can see the demo image below.

Implementation ideas:

  • Initially the html structure is similar to the picture in mobile, in order of title > avatar > content > button
  • The left padding of the wrapper will be equal to or greater than the size of the avatar to make room for the avatar
  • Avatar will be position: absolute then will no longer occupy height
  • Style position of avatar in accordance with the design
  • About responsive :
  • The avatar will become position: relative now the avatar size will return to normal
  • CSS re-size the avatar auto’s with wrapper

You can see the demo here: https://codepen.io/nguyenhuukhuyenudn/details/KKpoaPv


Above are 2 types of layout I usually do. In addition to how I share if you have a more optimal way, please share below. Please continue to watch the following, I will work with everyone to handle a few other interesting layout types.

Share the news now

Source : Viblo