<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css-grid - presentation - live-pen E</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid">
<div class="box a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, voluptas.</div>
<div class="box b">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo, facere! Repellendus cupiditate illum ea sed nulla.</div>
<div class="box c">Lorem ipsum dolor sit amet.</div>
<div class="box d">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi commodi placeat enim, expedita exercitationem minima sed tenetur similique maiores, sapiente facere omnis porro asperiores fugiat.</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/hmmh/css-grid-presentation-live-pen-e-dmZmmY */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 1em;
}
.box {
background: #c82506;
color: #fff;
padding: 1em;
}
.box:nth-child(odd) {
background: #ff0000;
}
.a {
grid-column: 1 / span 2;
grid-row: 1;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.c {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.d {
grid-column: 2 / 3;
grid-row: 2;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
