How To Divide Div Into 3 Equal Columns Layout CSS - Dev Practical

Trang chủ » Html Div Tag 3 Columns » How To Divide Div Into 3 Equal Columns Layout CSS - Dev Practical

Có thể bạn quan tâm

How to divide div into 3 equal columns layout CSS 30 Jun 2021

Illustration of 3 equal columns layout

Dividing a webpage into 3 columns creates more space to present content especially on desktop and wide screen.

3 columns Layout HTML CSS Code

HTML

<div class="columns"> <div class="column"> Column 1 </div> <div class="column"> Column 2 </div> <div class="column"> Column 3 </div> </div>

CSS

.column { float: left; width: 33.33%; } /* Stops the float property from affecting content after the columns */ .columns:after { content: ""; display: table; clear: both; }

Results

3 columns unresponsive screenshot

To make it responsive, we are going to use media queries an mobile first approach

.column { width: 100%; } @media (min-width: 48em) { .column { float: left; width: 33.33%; } /* Stops the float property from affecting content after the columns */ .columns:after { content: ""; display: table; clear: both; } }

Advertisement

For full width Layout

Just put them in a container and add some padding.

<div class="container"> <div class=" columns"> ///Put your individual columns inside here /// </div> </div

CSS

.container { padding: 2em 4em; }

Boxed Layout

For boxed Layout put the columns in a container with a maximum width.

HTML

<div class="container"> <div class=" columns"> ///Put your individual columns inside here /// </div> </div>

CSS

.container { max-width: 1000px; margin-right: auto; margin-left:auto; }

Result

3 Equal Columns Layout Website Examples

Example 1: Ethicalads Three columns

Example 2: Grammarly - Three columns

Example 3: Copy.ai - Three columns

[Screenshot with caption of with details like: boxed or full width] [Links: 1. For full length screenshot. 2. For link to website page]

Browser support for 3 columns CSS Float and Media Queries

  1. Browser support for CSS Float
Data on support for the mdn-css__properties__float feature across the major browsers from caniuse.com
  1. Browser support for CSS Media queries
Data on support for the css-mediaqueries feature across the major browsers from caniuse.com

Từ khóa » Html Div Tag 3 Columns