<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grids and Flex Boxes</title>
<style>
* {box-sizing:border-box; margin:0;}
/* the grid style - four automatic columns */
.thegrid {display:grid; grid-template-columns:auto auto auto auto; gap:10px; background-color:ForestGreen; padding: 10px; }
/* the grid elements */
.thegrid > div {background-color: PapayaWhip; text-align:center; padding:10px; font-size:32px;}
/* one specific grid element - spans two columns and two rows*/
.g1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; color:SaddleBrown;}
/* flexbox definition and elements */
.theflexbox {display:flex; flex-wrap:wrap; background-color:MediumBlue; margin-top:15px; flex-direction:row-reverse; justify-content:space-evenly;}
.theflexbox > div {background-color:LightBlue; margin:10px; padding:10px; text-align:center; font-size:32px;}
</style>
</head>
<body style="font-size:2.2em;">
<!-- grid example -->
<div class="thegrid">
<div>Austria</div>
<div>Germany</div>
<div>Switzerland</div>
<div>Denmark</div>
<div>Sweden</div>
<div class="g1">Czech Republic</div>
</div>
<!-- flexbox example -->
<div class="theflexbox">
<div>Italy</div>
<div>Spain</div>
<div>Portugal</div>
<div>Greece</div></div>
</body></html>
