2) Basic Grid - Line Placement

In this example below you will see how to do a 2) Basic Grid - Line Placement with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jobennett, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jobennett ©
  • HTML
  • CSS
  • JavaScript
    <!-- http://gridbyexample.com/examples/code/example5.html -->
<div class="wrapper">
  <div class="a"> 
    <h2>Item A</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sequi aliquam quasi impedit, soluta, id dolores esse natus molestiae, consectetur cupiditate officia veritatis libero fugit delectus. Eaque nisi, laborum velit! Item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sequi aliquam quasi impedit, soluta, id dolores esse natus molestiae, consectetur cupiditate officia veritatis libero fugit delectus. Eaque nisi, laborum velit! </p>
  </div>
  
  <div class="b"> 
    <h2>Item B</h2> 
  </div>
  
  <div class="c"> 
    <h2>Item C</h2> 
  </div>
  
  <div class="d">
    <h2>Item D</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam porro omnis quo nihil ducimus id ipsa quibusdam quidem commodi eligendi fuga explicabo libero deleniti, voluptatum quis quasi voluptatibus corporis assumenda!</p>
  </div>
  
  <div class="e"> 
    <h2>Item E</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magnam voluptate earum placeat laboriosam delectus suscipit recusandae quam rem doloribus, laudantium nostrum, neque aspernatur repellat culpa soluta molestias facilis, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem unde, expedita eveniet ducimus dicta! Quidem, quaerat! Velit minima expedita, quaerat iure officia adipisci dicta iste, recusandae. Dolorum, voluptatibus non totam.</p>
  </div>
  
  <div class="f"> 
    <h2>Item F</h2> 
  </div>
  
</div>

/*Downloaded from https://www.codeseek.co/jobennett/2-basic-grid-line-placement-GmxPjx */
    * {margin: 0; padding: 0;}

.wrapper>div {
  border: 1px solid black;
  padding: 10px;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 1rem;
}

.b {
/*   grid-column-start: 3;
  grid-row-start: 1; */
/*   grid-row-end: 3; */
/*   grid-row: 1 / 3; */
}


/*Downloaded from https://www.codeseek.co/jobennett/2-basic-grid-line-placement-GmxPjx */
    

Comments