CODEWITHSUNDEEP
htmlcsscss-grid
user13585926
user13585926

Reputation:

How can I achieve this layout using CSS Grid?

I am trying to acheive this layout using CSS Grid.

enter image description here

Currently, I am having trouble positioning the "Sub Title" below the "Main Title".

When I position the "Sub Title" below the "Main Title", a ton of white space is added below the "Sub Title" like the picture below. I commented the lines of code that causes this error.

enter image description here

Without touching my HTML, how can I acheive the layout at the top?

* {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

Upvotes: 0

Views: 109

Answers (2)

Sapinder Singh
Sapinder Singh

Reputation: 351

grid-template-columns: 350px 3fr;
grid-template-rows: auto 1fr auto;

is redundant when you have grid-template-areas as it automatically inserts required number of rows & columns.

Without touching your html, you can add another line of row in grid-template-areas property-

* {
  margin: 0; 
  padding: 0;
}

img {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-areas:
    "img h1"
    "img h2"
    "img p"
    "img ."      
}

img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
<div class="grid">

  <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">

  <h1>Main Title</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
    Praesent quis risus id dolor venenatis condimentum.</p>
    
  <h2>Sub Title</h2>

</div>

The . inserts empty column which does your job pretty well.

Upvotes: 0

StrayAnt
StrayAnt

Reputation: 379

You can split your content into 2 separate div's example below..

But "Education 4Fun" does have a good point with bootstrap. It makes this kind of stuff a lot easier. Link-----> https://getbootstrap.com/ 

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        * {
  margin: 0; 
  padding: 0;
}


img {
  max-width: 100%;
}


.grid {
  display: grid;
  grid-template-columns: 350px 3fr;
  grid-template-rows: auto 1fr auto;
    
  grid-template-areas:
    "img h1"
    "img p"
      
       
 
/* My attempt of achieving the layout */ 
/* White space is added below the Subtitle for some reason  */

/*   grid-template-areas:
    "img h1"
    "img h2"
    "img p"  */
  
}


img { grid-area: img; }
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
    </style>
</head>
<body>
<div class="grid">
    <div id="content1">
        <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80" alt="Placeholder">
    </div>
    <div id="content2">
        <h1>Main Title</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
        Praesent quis risus id dolor venenatis condimentum.</p>
        
      <h2>Sub Title</h2>
    </div>

</div>
</body>
</html>

Upvotes: 0

Related Questions