How to divide a webpage into four parts using flexbox? - html

Question

How to divide a webpage into four equal parts using flex box? Something like this website- www.rileyjshaw.com
The columns should be able to stack upon one another on smaller view ports.
Edit/ Update:
So far I've tried this-
Should I change the line height? How can I achieve distinct blocks?
/* Grid */
.column {
flex-basis: 100%;
width: 50%;
height: 50%;
line-height: 200px;
}
#media screen and (min-width: 800px) {
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
flex: 1;
}
._25 {
flex: 2.5;
}
._5 {
flex: 5;
}
}
/* Style */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
}
.column {
/* padding: 15px;
border: 1px solid #666;
margin: 5px 0;*/
background: #343436;
}
main {
max-width: 1200px;
margin: 0 auto;
}
h1,
h2 {
text-align: center;
}
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>

Answer 1

You can simplify the code and gain the wanted output. Here I removed the row's and used a container. The main benefit with this structure is that you can alter the order of the column's if you find that necessary.
I also choose to use flex-basis instead of flex-grow to make them stay 50% wide no matter their content size.
On wider screens, using the media query, set the column's 50% wide and the container to display: flex; flex-wrap: wrap;.
On narrower screens, and being block elements, they stack on top of each other by default
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
}
.column {
height: 25%;
}
#media screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
height: 50%;
}
}
/* general styles */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
}
.column {
padding: 15px;
/*border: 1px solid #666;*/
box-sizing: border-box;
}
.column:nth-child(1) {
background: #5c9;
}
.column:nth-child(2) {
background: #fb0;
}
.column:nth-child(3) {
background: #39f;
}
.column:nth-child(4) {
background: #f33;
}
main {
max-width: 1200px;
margin: 0 auto;
}
h1,
h2 {
text-align: center;
}
<div class="container">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
If you still need the original markup structure, here is a sample with that too
html, body {
height: 100%;
margin: 0;
}
.row {
height: 50%;
}
.column {
height: 50%;
}
#media screen and (min-width: 600px) {
.row {
display: flex;
}
.column {
flex-basis: 50%;
height: 100%;
}
}
/* general styles */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
}
.column {
padding: 15px;
/*border: 1px solid #666;*/
box-sizing: border-box;
}
.row:nth-child(1) .column:nth-child(1) {
background: #5c9;
}
.row:nth-child(1) .column:nth-child(2) {
background: #fb0;
}
.row:nth-child(2) .column:nth-child(1) {
background: #39f;
}
.row:nth-child(2) .column:nth-child(2) {
background: #f33;
}
main {
max-width: 1200px;
margin: 0 auto;
}
h1,
h2 {
text-align: center;
}
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
Updated based on a comment
Centering the column's content can be done with i.e.:
Flexbox - https://jsfiddle.net/0ns6ofcp/
.column {
height: 25%;
display: flex; /* added */
justify-content: center; /* hor. center */
align-items: center; /* ver. center */
}
Transform - https://jsfiddle.net/0ns6ofcp/1/
<div class="column">
<div>50%</div>
</div>
.column {
position: relative; /* added property */
height: 25%;
}
.column > div { /* added rule */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

Answer 2

Here is something you can start with:
/* Grid */
.column {
flex-basis: 100%;
height: 50vh;
}
.row {
display: flex;
}
.row:first-child .column:first-child {
background: red;
}
.row:first-child .column:last-child {
background: blue;
}
.row:last-child .column:first-child {
background: green;
}
.row:last-child .column:last-child {
background: black;
}
/* Style */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
}
.column {
background: #343436;
}
<div>
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
<div class="row">
<div class="column">
50%
</div>
<div class="column">
50%
</div>
</div>
</div>