How can I achieve this layout using CSS Grid?
I am trying to acheive this layout using CSS Grid.
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.
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>
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.
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>
