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 withwidth - 10px => 3(item) * 10px = 30pxwill be empty at30pxdistance. - Except for the last item, every previous item (here are 2 items) of 1 row will have
margin-right = 30px / 2 = 15px.
1 2 3 4 5 6 7 | .list .item .item .item .item .item |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token selector">* </span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span> <span class="token punctuation">:</span> border-box <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.list </span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> <span class="token property">flex-wrap</span> <span class="token punctuation">:</span> wrap <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 15px 15px 0 <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> #FFC107 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item </span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> #FF5722 <span class="token punctuation">;</span> <span class="token comment">// 100% / 3 để chia item thành 3 cột (33%), -10px tức là mỗi item sẽ trống 10px => 3 * 10px = 30px</span> <span class="token property">width</span> <span class="token punctuation">:</span> <span class="token function">calc</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> 100% <span class="token operator">/</span> 3 <span class="token punctuation">)</span> <span class="token operator">-</span> 10px <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 200px <span class="token punctuation">;</span> <span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 15px <span class="token punctuation">;</span> <span class="token comment">// nth-child(3n) là những item vị trí là bội của 3, :not là những item khác điều kiện</span> & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> <span class="token function">nth-child</span> <span class="token punctuation">(</span> 3n <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 1 row trống 30px, khoảng cách giữa sẽ là (item trên 1 row - 1) / 2. Vì thằng cuối cùng không có margin.</span> <span class="token property">margin-right</span> <span class="token punctuation">:</span> 15px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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
htmlstructure is similar to the picture in mobile, in order oftitle > 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: absolutethen will no longer occupy height - Style position of avatar in accordance with the design
- About responsive :
- The avatar will become
position: relativenow the avatar size will return to normal - CSS re-size the avatar auto’s with wrapper
1 2 3 4 5 6 7 8 | .card h3.card__title a(href="#") Lorem, ipsum dolor .card__avatar img(src="https://www.baohanam.com.vn/DATA/0/2019/09/anh_di_san-16_57_57_677.jpg", alt="") .card__description Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique cupiditate, doloremque expedita, fugit esse totam veniam ab maxime consectetur nesciunt fugiat, quis hic tempora temporibus beatae laborum cumque qui! Accusamus. a.card__button(href="#") Read more |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <span class="token selector">.card </span> <span class="token punctuation">{</span> <span class="token property">position</span> <span class="token punctuation">:</span> relative <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 700px <span class="token punctuation">;</span> <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0px 14px 80px <span class="token function">rgba</span> <span class="token punctuation">(</span> #000, 0.2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 50px 50px 50px 140px <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span> __avatar </span> <span class="token punctuation">{</span> <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span> <span class="token property">top</span> <span class="token punctuation">:</span> 50% <span class="token punctuation">;</span> <span class="token property">left</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">translate</span> <span class="token punctuation">(</span> -50%, -50% <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 220px <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 4px 13px 30px 1px <span class="token function">rgba</span> <span class="token punctuation">(</span> 252, 56, 56, 0.2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">overflow</span> <span class="token punctuation">:</span> hidden <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span> __title </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px 0 <span class="token punctuation">;</span> <span class="token selector">a </span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #5D4037 <span class="token punctuation">;</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 30px <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 600 <span class="token punctuation">;</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 1.35 <span class="token punctuation">;</span> <span class="token property">text-decoration</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span> __description </span> <span class="token punctuation">{</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 10px 0 <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #333 <span class="token punctuation">;</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 1.35 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span> __button </span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token property">margin-top</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px 25px <span class="token punctuation">;</span> <span class="token property">background-image</span> <span class="token punctuation">:</span> <span class="token function">linear-gradient</span> <span class="token punctuation">(</span> 147deg, #fe8a39 0%, #fd3838 74% <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 500 <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token property">text-decoration</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 50px <span class="token punctuation">;</span> <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0px 14px 60px <span class="token function">rgba</span> <span class="token punctuation">(</span> 252, 56, 56, 0.4 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Responsive khi màn hình <= 640px</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span> <span class="token property">max-width</span> <span class="token punctuation">:</span> 640px <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.card </span> <span class="token punctuation">{</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span> __avatar </span> <span class="token punctuation">{</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span> <span class="token property">position</span> <span class="token punctuation">:</span> relative <span class="token punctuation">;</span> <span class="token property">top</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">lef</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">translate</span> <span class="token punctuation">(</span> 0, 0 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span> __description </span> <span class="token punctuation">{</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 20px 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span> __button </span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
You can see the demo here: https://codepen.io/nguyenhuukhuyenudn/details/KKpoaPv
summary
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.