Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by molokaiwaves
molokaiwaves
570 Points

CSS Grids - basic question

I'm experimenting with CSS Grids and running into some problems. Specifically, I'm trying to create gaps between the div elements. I've got a gap of 20px, but it doesn't seem to be showing up in the display of the page. Any suggestions? Thanks.

CSS

body { margin: 20px; }

.container { display: grid; grid-template-columns: 70% 30%; grid-gap: 20px; width: 800px; margins: 0 auto; }

div { background: #ccc; padding: 5px; }

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Grid Test</title> <link rel="stylesheet" href="grids.css" />

</head> <body> <!-- test of CSS Grids with one column at 70% and second column 30% --> <h3>Test of CSS Grids</h3> <div class="container"> <div>Chunk 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut est et lacus lacinia condimentum quis a ex. Pellentesque tempus tellus id nisl vulputate, id sodales lectus finibus. Praesent lacinia felis ac ex viverra, et fringilla urna maximus. Nunc luctus venenatis nunc, quis rutrum magna venenatis id. Integer fermentum erat ipsum, et consectetur nisl porta vitae. Morbi accumsan mi facilisis nulla scelerisque, eu gravida mauris aliquet. Donec ac enim at ligula feugiat pulvinar id eget magna. Cras et ullamcorper est. Duis congue facilisis neque id hendrerit. Donec pellentesque sem sit amet condimentum commodo. Vivamus quis metus eget dolor egestas malesuada nec ac quam. Cras euismod, leo sit amet consectetur tempus, urna tortor varius leo, a porttitor metus nibh nec risus. Sed sollicitudin eget lectus nec facilisis. </div>

<div> Chunk 2- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut est et lacus lacinia condimentum quis a ex. Pellentesque tempus tellus id nisl vulputate, id sodales lectus finibus. Praesent lacinia felis ac ex viverra, et fringilla urna maximus. Nunc luctus venenatis nunc, quis rutrum magna venenatis id. Integer fermentum erat ipsum, et consectetur nisl porta vitae.</div>

<div> Chunk 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut est et lacus lacinia condimentum quis a ex. Pellentesque tempus tellus id nisl vulputate, id sodales lectus finibus.</div>

<div> Chunk 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut est et lacus lacinia condimentum quis a ex. Pellentesque tempus tellus id nisl vulputate, id sodales lectus finibus.</div>

</div>

</body> </html>

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The grid-gap is clearly visible for me in Chrome. Perhaps it's not obvious what part of the display is the gap.

Try adding a border to the "div" elements to make the gap easy to see, or give the ".container" a different background color to make the other div's stand out.

molokaiwaves
molokaiwaves
570 Points
molokaiwaves
molokaiwaves
570 Points

Thanks. I added color to the border and container and that helped reveal the gap. I also added <grid-row-gap> since I wanted to show the gap between the two rows of content.