HTML CSS

CREATE ROWS & COLUMNS WITHOUT TABLES

(a quick guide)

<div class="demo">   <!-- FIRST ROW -->   <div class="colA">1</div>   <div class="colB">2</div>     <!-- SECOND ROW -->   <div class="colA">1</div>   <div class="colB">2</div> </div>

HTML - TABLES WITHOUT <TABLE>

01

FLEX CONTAINER .demo { display: flex; flex-wrap: wrap; }

CSS FLEXIBLE BOX

02

ON BIG SCREENS - 2 COLS .colA { width: 30%; } .colB { width: 70%; }

ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) {   .colA { width: 100%; }   .colB { display: none; } }

GRID CONTAINER - 2 COLS .demo { display: grid; grid-template-columns: 30% 70%; }

CSS GRID LAYOUT

03

ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) {   .demo { grid-template-columns: 100%; }   .colB { display: none; } }

CLEARFIX CONTAINER .demo { overflow: auto; } .demo::after  { content: ""; clear: both; display: table; }

FLOATING CONTAINERS

04

ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) {   .colA { width: 100%; }   .colB { display: none; } }

ON BIG SCREENS - 2 COLS .colA, .colB { float: left; width: 50%; }