CSS grid v2

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

playing with css grid

Thumbnail
This awesome code was written by idkw2wh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright idkw2wh ©
  • HTML
  • CSS
  • JavaScript
    #content
  .one 
    div 
      h2 one
  .two
    div
      h2 two
      p A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
  .three
    div
      h2 three
  .four
    div
      h2 four
      p A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
  .five
    div
      h2 five
  .six
    div
      h2 six
      p I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
      p I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      p I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
  .seven
    div
      h2 seven
      p I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
  .eight
    div
      h2 eight
      p When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!
      

/*Downloaded from https://www.codeseek.co/idkw2wh/css-grid-v2-EvPpjj */
    * {
  box-sizing: border-box;
}
body {
  background-color: #f3f3f3;
  color: #fff;
  font-size: 16px;
  letter-spacing: 3px;
  margin: 0;
}
#content {
  margin: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  grid-auto-rows: minmax(min-content, max-content);
}
h2 {
  text-align: center;
}
#content > div {
  text-align: left;
  padding: 10px;
}
#content > div:hover {
  border: 4px solid rgba(0,0,0,0.3)
}
.one {
  grid-column: 1 / 5;
  grid-row: 1;
  background-color: #E7D3BA;
}
.two {
  grid-column: 1 / 3;
  grid-row: 2;
  background-color: #B698D6;
}
.three {
  grid-column: 3 / 5;
  grid-row: 2;
  background-color: #6A2DCD;
}
.four {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
  background-color: #81ACC3;
}
.five {
  grid-column: 1 / 3;
  grid-row: 5;
  background-color: #6D5A7F;
}
.six {
  grid-column: 3;
  grid-row: 3 / 6;
  background-color: #B78D6D;
}
.seven {
  grid-column: 1 / 4;
  grid-row: 6;
  background-color: #594844;
}
.eight {
  grid-column: 4;
  grid-row: 3 / 7;
  background-color: #BCBD7C;
}
@media(max-width: 599px) {
  #content > div {
    grid-column: 1 / 5;
    grid-row: auto;
  }
}


/*Downloaded from https://www.codeseek.co/idkw2wh/css-grid-v2-EvPpjj */
    

Comments