css-grid - presentation - live-pen D

In this example below you will see how to do a css-grid - presentation - live-pen D 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 D</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">Box A</div>
  <div class="box b">Box B</div>
  <div class="box c">Box C</div>
  <div class="box d">Box D</div>
  <div class="box e">Box E</div>



/*Downloaded from https://www.codeseek.co/hmmh/css-grid-presentation-live-pen-d-bvYvao */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 2fr;
  grid-auto-rows: minmax(250px, auto);
  grid-gap: 1em;

.box {
  background: #c82506;
  color: #fff;
  text-align: center;
  background-image: url(https://picsum.photos/500);
  background-repeat: no-repeat;
  background-size: cover;