CSS grid column starting and ending in the middle - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

CSS grid column starting and ending in the middle

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.grid-3-10 {<!--  w  w  w . j av  a 2 s. co m-->
   margin-left: auto;
   margin-right: auto;
   max-width: 960px;
   width: 100%;
   justify-content: baseline;
   display: grid;
   grid-column-gap: 40px;
   grid-template-columns: repeat(12, auto);
}
.content {
   grid-column-end: 11;
   grid-column-start: 3;
}
      </style> 
 </head> 
 <body translate="no"> 
  <div class="grid-3-10"> 
   <div class="content"> 
    <h1>Title</h1> 
   </div> 
  </div> 
  <div class="grid-3-10"> 
   <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mi cursus, faucibus orci sit amet, suscipit urna. Vestibulum bibendum varius ante bibendum imperdiet. Nullam et erat at mi sodales maximus eget nec quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan enim est, et tempus nisl dapibus in. Praesent consequat a nibh quis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae iaculis dolor. Proin imperdiet pharetra euismod. Aliquam nulla erat, hendrerit nec nibh ut, sodales pretium eros.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials