css-grid - presentation - live-pen E

In this example below you will see how to do a css-grid - presentation - live-pen E with some HTML / CSS and Javascript

pen für livecoding in der präsentation

This awesome code was written by #frontend-cop, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright #frontend-cop ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <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">



  <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>



/*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;