It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.<\/p>\n
<\/p>\n
We spent our time poking at the very basics of CSS Grid and what we learned is that it’s a lot less scary to start using it than either of us expected. We start with a simple example and then noodle our way through the CSS Grid properties to learn what other things it is capable of handling without getting too far in the weeds.<\/p>\n
Here are a few resources we mentioned during our chat that are worth linking to:<\/p>\n
It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple […]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[686],"acf":[],"jetpack-related-posts":[{"id":262330,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-grid-starter-layouts\/","url_meta":{"origin":251134,"position":0},"title":"CSS Grid Starter Layouts","date":"November 24, 2017","format":false,"excerpt":"This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects. Remember that browser support for Grid is good but requires\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/grid-starter-layouts-featured.png?fit=1200%2C682&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":177032,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-column\/","url_meta":{"origin":251134,"position":1},"title":"grid-row \/ grid-column","date":"July 30, 2014","format":false,"excerpt":"The grid-row and grid-column properties define which row or column an element will be displayed on. .element { grid-row: 1 \/ 2; grid-column: 3 \/ -1; } Here's an explicit 3 \u00d7 3 grid where these properties are used to place grid items onto it in specific places: CodePen Embed\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306112,"url":"https:\/\/css-tricks.com\/video-screencasts\/179-a-grid-of-squares\/","url_meta":{"origin":251134,"position":2},"title":"#179: A Grid of Squares","date":"April 6, 2020","format":false,"excerpt":"Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It's possible, but it involves a little trickery. In this video, we'll look at doing that because we want to\u2026","rel":"","context":"In \"aspect ratio\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/grid-of-logos.png?fit=1200%2C902&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":18979,"url":"https:\/\/css-tricks.com\/video-screencasts\/115-dont-overthink-it-grids\/","url_meta":{"origin":251134,"position":3},"title":"#115: Don’t Overthink It Grids","date":"October 24, 2012","format":false,"excerpt":"Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that's a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great\u2026","rel":"","context":"With 47 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":374484,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row\/","url_meta":{"origin":251134,"position":4},"title":"grid-row","date":"October 26, 2022","format":false,"excerpt":"The grid-row CSS property is a shorthand that specifies the row grid lines where a grid item starts and ends in a grid layout, and does it in a single declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-row: 2 \/ 4; \/* Starts on the second\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":251134,"position":5},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/251134"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=251134"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/251134\/revisions"}],"predecessor-version":[{"id":251740,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/251134\/revisions\/251740"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=251134"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=251134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}