Reading Grid

What is a reading grid How do you make a reading grid? This script and codes were developed by Orion Drummond on 26 October 2021, Tuesday.

How do I make an reading grid?
  1. Reading Grid Previews
  2. Reading Grid HTML Codes
  3. Reading Grid CSS Codes
Reading Grid Previews

Reading Grid HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Reading Grid</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import "//fonts.googleapis.com/css?family=Open+Sans";
html {
  font-family: 'Open Sans', sans-serif;
}
.grid-flow:after {
  display: block;
  content: "";
  clear: left;
}
.grid-flow--center {
  margin-left: auto;
  margin-right: auto;
}
.grid-flow-col {
  box-sizing: border-box;
  width: 19rem;
  float: left;
}
.grid-flow-col--br {
  margin-left: initial;
}
@media only screen and (min-width: 27rem) {
  .grid-flow--n2 {
    max-width: 19rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(1n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(1n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 48rem) {
  .grid-flow--n2 {
    max-width: 40rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(2n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(2n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 69rem) {
  .grid-flow--n3 {
    max-width: 61rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(3n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(3n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 90rem) {
  .grid-flow--n2 {
    max-width: 82rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(4n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(4n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 132rem) {
  .grid-flow--n3 {
    max-width: 124rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(6n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(6n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 174rem) {
  .grid-flow--n2 {
    max-width: 166rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(8n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(8n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 195rem) {
  .grid-flow--n3 {
    max-width: 187rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(9n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(9n + 1) {
    margin-left: initial;
    clear: left;
  }
}
.grid-flow--margin {
  margin-left: 4rem;
  margin-right: 4rem;
}
@media only screen and (max-width: 27rem) {
  .grid-flow--margin,
  .grid-flow--center {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <body class="grid">
<h1 class="grid-flow--n2 grid-flow--n3 grid-flow--center">Reading grid</h1>
<section class="grid-flow grid-flow--n2 grid-flow--n3 grid-flow--center">
  <div class="grid-flow-col">
    <h2>Comfort zone</h2>
    <p>Set an comfortable line length for reading and LESS the rest.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Responsive and Readable</h2>
    <p>This is a responsive grid but it's necessarily not fluid. Other grids can fill all the available space on a page, but that's not always going to produce a readable result.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Narrative or navigation</h2>
    <p>This grid is similar to using the CSS-3 columns module. It differs in it's brutal strictness to the grid. This is intended to improve scanning for narrative/navigation hybrids.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Schmelements</h2>
    <p>Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear.</p>
  </div>
  <blockqoute class="grid-flow-col">
    <h2>For example</h2>
    <p>"Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear. Wait, I just said that."</p>
    <cite>–Me</cite>
  </blockqoute>
  <div class="grid-flow-col">
    <h2>Couplets and Triplets</h2>
    <p>The grid includes 2 classes for describing how columns are grouped. If you have a total of 2, 4, 8, or 16 columns, use <code>grid--n2</code>. If you have 3, 6, 9, or 18 columns, use <code>grid--n3</code>. You can use both also.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Old explorers</h2>
    <p>Below IE 9, the nth-child selectors and media queries will not work. The old explorers will find natural flows instead of floating columns.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Spanners</h2>
    <p>That tool doesn't fit this socket.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Nor devices</h2>
    <p>Making arbitrary choices based on device usage can be effective, but the goal here is to create a dynamic system the uses the line width constant to derive it's breakpoints.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Semantic</h2>
    <ol>
      <li><code>.grid</code> on the parent layout element that equals the viewport width.</li>
      <li><code>.grid-flow</code> to contain any number of columns.</li>
      <li><code>.grid-flow-col</code> to present a column.</li>
    </ol>
  </div>
  <div class="grid-flow-col">
    <h2>Git it</h2>
    <p>Not ready to commit yet.</p>
  </div>
  <div class="grid-flow-col">
    <h2>Use it</h2>
    <p>Go ahead.</p>
  </div>
</section>
</body>
  
  
</body>
</html>

Reading Grid CSS Codes

@import "//fonts.googleapis.com/css?family=Open+Sans";
html {
  font-family: 'Open Sans', sans-serif;
}
.grid-flow:after {
  display: block;
  content: "";
  clear: left;
}
.grid-flow--center {
  margin-left: auto;
  margin-right: auto;
}
.grid-flow-col {
  box-sizing: border-box;
  width: 19rem;
  float: left;
}
.grid-flow-col--br {
  margin-left: initial;
}
@media only screen and (min-width: 27rem) {
  .grid-flow--n2 {
    max-width: 19rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(1n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(1n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 48rem) {
  .grid-flow--n2 {
    max-width: 40rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(2n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(2n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 69rem) {
  .grid-flow--n3 {
    max-width: 61rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(3n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(3n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 90rem) {
  .grid-flow--n2 {
    max-width: 82rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(4n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(4n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 132rem) {
  .grid-flow--n3 {
    max-width: 124rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(6n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(6n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 174rem) {
  .grid-flow--n2 {
    max-width: 166rem;
  }
  .grid-flow--n2 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n2 :nth-child(8n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n2 .grid-flow-col:nth-child(8n + 1) {
    margin-left: initial;
    clear: left;
  }
}
@media only screen and (min-width: 195rem) {
  .grid-flow--n3 {
    max-width: 187rem;
  }
  .grid-flow--n3 .grid-flow-col {
    margin-left: 2rem;
  }
  .grid-flow--n3 :nth-child(9n + 1) ~ .grid-flow-col {
    margin-left: 2rem;
    clear: initial;
  }
  .grid-flow--n3 .grid-flow-col:nth-child(9n + 1) {
    margin-left: initial;
    clear: left;
  }
}
.grid-flow--margin {
  margin-left: 4rem;
  margin-right: 4rem;
}
@media only screen and (max-width: 27rem) {
  .grid-flow--margin,
  .grid-flow--center {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.