CSS Grid - Basic no-named Grid

In this example below you will see how to do a CSS Grid - Basic no-named Grid with some HTML / CSS and Javascript

No-named Grids work's based in the HTML structure, in this example, you can see the Sidebar is the second element in the grid container and, because of that, when we set the container to have 2 columns, the sidebar goes to the right. Pay attention to the grid-row definition in the Sidebar media-querie, we need that declaration to avoid the subsequent elements to go below the Sidebar

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Grid - Basic no-named Grid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div class="container">
    <div class="content">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam fuga dolores aliquid voluptatem provident, exercitationem nostrum ullam est repudiandae tenetur velit optio aut aliquam officia eaque adipisci omnis pariatur similique nisi corporis cum amet! Porro, perferendis maxime, praesentium accusamus, expedita quae nobis minus, perspiciatis temporibus quas officiis nesciunt voluptatum. Soluta!</p>
    </div>
    <div class="sidebar">
      <div class="widget">
        <dl>
          <dt>Lorem ipsum.</dt>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
        </dl>
      </div>
      <div class="widget">
        <dl>
          <dt>Lorem ipsum.</dt>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
          <dd><strong>Lorem ipsum dolor sit amet.</strong></dd>
        </dl>
      </div>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, id quibusdam iure dolor eligendi eum fugit architecto, eos consequuntur in, veritatis facere beatae odit! Vitae rerum quo molestias quod ex totam quaerat doloribus error explicabo quam non ratione ipsa esse iste beatae magnam in distinctio, pariatur ullam nihil, cupiditate? Sed.</p>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, id quibusdam iure dolor eligendi eum fugit architecto, eos consequuntur in, veritatis facere beatae odit! Vitae rerum quo molestias quod ex totam quaerat doloribus error explicabo quam non ratione ipsa esse iste beatae magnam in distinctio, pariatur ullam nihil, cupiditate? Sed.</p>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, id quibusdam iure dolor eligendi eum fugit architecto, eos consequuntur in, veritatis facere beatae odit! Vitae rerum quo molestias quod ex totam quaerat doloribus error explicabo quam non ratione ipsa esse iste beatae magnam in distinctio, pariatur ullam nihil, cupiditate? Sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ipsum excepturi eligendi explicabo vel eveniet sit eum nulla omnis beatae modi, accusamus reiciendis numquam hic esse necessitatibus quibusdam natus quo? Non dolore quae maiores. Rerum aperiam, aspernatur beatae, ut dolores ullam iste tempore ex, cupiditate ab hic optio! Inventore quasi quaerat modi beatae corporis, voluptas voluptatem, nulla, officiis expedita cum praesentium omnis necessitatibus amet recusandae eum in nihil rem itaque alias. Aperiam, error similique facere voluptate. Dolorem veniam esse aut est tempore laborum ad quasi vitae, quisquam architecto quidem hic animi voluptatum quo deserunt ratione, nobis harum error. At fuga id mollitia earum repudiandae magnam odit voluptatum, ad amet autem placeat nihil laudantium suscipit ipsam harum, et, iusto. Hic qui cum cumque sint rem ut ducimus eaque ea iste nisi debitis vitae voluptate asperiores tempora, doloremque maxime nulla, tempore repudiandae deleniti eum eveniet, corporis voluptates veniam distinctio. Ea, adipisci veniam perspiciatis dolorem, obcaecati pariatur enim esse fugiat doloremque fuga cumque mollitia debitis sequi delectus! Suscipit ex ipsum ipsam officiis voluptatum nisi rem ipsa iusto ab repudiandae perferendis modi temporibus magni, a delectus blanditiis, assumenda numquam! Rerum vel nobis vitae delectus corporis ipsam numquam quas repellendus iusto magnam quae, dolore fuga!</p>
    </div>
  </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/css-grid-basic-no-named-grid-xqoNro */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;;
    }

    h1 {
      margin-bottom: 16px;
      margin-top: 0;
    }

    p {
      margin-bottom: 8px;
      margin-top: 0;
    }

    dl {
      margin-bottom: 16px;
      margin-top: 0;
    }

    dt {
      margin-bottom: 12px;
    }

    dd {
      margin-bottom: 4px;
      margin-left: 12px;
    }

    .container {
      display: grid;
      grid-gap: 12px;
      padding: 12px;
    }

    @media all and (min-width: 425px) {
      .sidebar {
        display: inherit;
        grid-gap: inherit;
        grid-template-columns: 1fr 1fr;
      }
    }

    @media all and (min-width: 768px) {
      .container {
        grid-template-columns: 2fr 1fr;
      }

      .sidebar {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        grid-row: span 4;
      }
    }

/*Downloaded from https://www.codeseek.co/oieduardorabelo/css-grid-basic-no-named-grid-xqoNro */
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Comments