HTML CSS

RESPONSIVE EQUAL HEIGHT COLUMNS

(a quick guide)

<div class="demo">   <div>1</div>   <div><p>2</p> <p>2</p></div>   <div><p>3</p> <p>3</p> <p>3</p></div> </div>

DEMO HTML FOR ALL EXAMPLES

00

.demo { display: flex; } .demo > * { flex: 1; } 

FLEXIBLE CONTAINER

01

.demo {   display: grid;   grid-template-columns: repeat(3,   minmax(0, 1fr)); }

GRID CONTAINER

02

.demo { display: table; width: 100%; } .demo > * { display: table-cell; width: 33%; }

DISPLAY AS TABLE

03

.demo { overflow: hidden; } .demo > * {   float: left; width: 33%;    padding: 10px 10px 99999px 10px;   margin-bottom: -99999px;  }

FLOAT CONTAINERS

04

.demo {   overflow: hidden;   background-image: linear-gradient(to   right, #ffebeb 33%, #d5ffd2 33%,   #d5ffd2 66%, #eae9ff 66%,   #eae9ff 100%);  } .demo > * { float: left; width: 33%; }

FAUX COLUMNS

05