CSS Grid Layout

- Written by

Last modified February 4, 2018

CSS Grid Layout [purely random]

What is this post? This article does not explain and / or introduce anything new. The demonstration of the CSS Grid Layout is purely coincidental, although most likely for some it is an angular question to be remedied in your experiments. In this article I am implementing some experiments that will be introduced in the New CodePlay Editors

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="heading">5
      <h1>CSS Grid Layout</h1>
    <p>Using grid-template-columns:</p>
      <h2>_wblz(@) <span class="demo-number">Live</span></h2>
  </div>
  <div class="intro">6
  </div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</main>
@import "https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400";
.support {
  align-items: center;
  background: tomato;
  color: #fff;
  display: flex;
  font-size: .9rem;
  padding: 0 10px 0 0;
  position: fixed;
  right: 0;
  top: 0;
  width: auto;
  z-index: 100;
}
.support a {
  color: #fff;
  padding: 10px 0;
  text-decoration: none;
}
@supports (display: grid) {
  .support {
    background: #058a6e;
    right: 40px;
    transform: translateX(100%);
    transition: right .5s ease-in-out, transform .5s ease-in-out;
  }
  .support:hover {
    right: 0;
    transform: translateX(0%);
  }
}
.support svg {
  fill: #ffffff;
  height: 30px;
  margin-right: 5px;
  padding: 5px;
  width: 30px;
}
.unsupported {
  display: block;
}
@supports (display: grid) {
  .unsupported {
    display: none;
  }
}
.supported {
  display: none;
}
@supports (display: grid) {
  .supported {
    display: block;
  }
}
main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(1fr, 500px);
}
@media (min-width: 34em) {
  main {
    grid-template-columns: repeat(4, 1fr);
  }
}
.heading {
  grid-row: span 3;
}
.intro {
  grid-row: span 2;
}
@media (min-width: 34em) {
  .intro {
    grid-column: span 3;
  }
}
div:nth-of-type(1) {
  background: #07779c;
}
div:nth-of-type(2) {
  background: #157c89;
}
div:nth-of-type(3) {
  background: #238077;
}
div:nth-of-type(4) {
  background: #318564;
}
div:nth-of-type(5) {
  background: #3f8a52;
}
div:nth-of-type(6) {
  background: #4d8e3f;
}
div:nth-of-type(7) {
  background: #5b932c;
}
div:nth-of-type(8) {
  background: #69971a;
}
div:nth-of-type(9) {
  background: #779c07;
}
body {
  background: #424242;
  color: #fff;
  font-family: Comfortaa, sans-serif;
  font-weight: 300;
  letter-spacing: .03rem;
  line-height: 1;
  margin: 0 auto;
}
h1 {
  font-size: 4rem;
  font-weight: 700;
  margin: 0;
}
div {
  color: #fff;
  padding: .85rem;
}
@media (min-width: 34em) {
  div {
    padding: 2rem;
  }
}
h2 {
  font-size: 2.0rem;
  display: inline-block;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.demo-number {
  font-family: 'Bungee Shade', cursive;
  font-size: 3.5rem;
}
a {
  color: #133875;
}
p {
  font-size: 1rem;
  line-height: 1.5;
}


// No JS

Result [ on the fly ]

iframe [ width + height = autoResizing ]

@webbeloz

 3
2 Comments to

“CSS Grid Layout”

  • zio January 22, 2018 at 11:27 am

    Nice work();

ร—

Time expired..
- default (90 days)
- edit to (∞ days)
- Spamm Check

Leave a Comment

* Required: Name, eMail, Comment Emoji? : if(name) => start.eMail if(eMail) => start.Comment + Emoji (On/Off) ? a=* b=* c=31 (a + b = c) => Post a Comment enjoy(: tnx_wblz
OFF
ON
Check Url & "Not Allowed"
No Text /HTML