CSS grid practice

In this example below you will see how to do a CSS grid practice with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by susannah_lowe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright susannah_lowe ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>

/*Downloaded from https://www.codeseek.co/susannah_lowe/css-grid-practice-rdQNmP */
    .wrapper {
  width: 600px; 
  height: 600px; 
  display: grid; 
  grid-gap: 30px 20px; 
  grid-template-rows: 170px 210px 61px 61px; 
  grid-template-columns: 124px 376px 42px;
  background-color: black;
}

div {
  border: 1px solid black; 
  background-color: white;
  text-align: center;
}

.a {
  grid-row: 1/2;
  grid-column: 1/2; 
}

.b {
  grid-row: 2/3;
  grid-column: 1/2;
}

.c {
  grid-row: 1/3;
  grid-column: 2/4; 
  background: red; 
}

.d {
  grid-row: 3/5;
  grid-column: 1/2;
  background: blue; 
}

.e {
  grid-row: 3/5;
  grid-column: 2/3;
}

.f {
  grid-row: 3/4;
  grid-column: 3/4;
}

.g {
  grid-row: 4/5;
  grid-column: 3/4;
  background: yellow; 
}


/*Downloaded from https://www.codeseek.co/susannah_lowe/css-grid-practice-rdQNmP */
    

Comments