{"id":321902,"date":"2020-09-28T07:35:12","date_gmt":"2020-09-28T14:35:12","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=321902"},"modified":"2021-08-30T13:34:14","modified_gmt":"2021-08-30T20:34:14","slug":"row-gap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/r\/row-gap\/","title":{"rendered":"row-gap"},"content":{"rendered":"\n<p>The <code>row-gap<\/code> property in CSS sets space (formally called &#8220;gutters&#8221;) between rows in CSS Grid, Flexbox, and CSS Columns layouts.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/09\/row-gap-1.svg\" alt=\"\" class=\"wp-image-321911\"\/><\/figure>\n\n\n\n<p>You can think of <code>row-gap<\/code> as the &#8220;next generation&#8221; or successor of <code>grid-row-gap<\/code> which was originally defined in the CSS Grid Layout specification. In an effort to extend that feature of grid so that it applies to flexbox and columns as well, the <code>grid-<\/code> prefix was dropped. It&#8217;s less specific to grid that way.<\/p>\n\n\n\n<p>But it&#8217;s also a bit of a hassle if you&#8217;ve already been using <code>grid-row-gap<\/code> (as well as <code>grid-gap<\/code> and <code>grid-column-gap<\/code> for that matter) because it means we need to support the prefixed version until every browser makes the switch. The future-proof way to do that is to declare the prefixed property <em>before<\/em> <code>row-gap<\/code>. That way, browsers that support it will use it and those that don&#8217;t will go up the next level and get what they need.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.something {\n  display: grid;\n  grid-template-rows: repeat(3, 1fr);\n  grid-row-gap: 2rem; \/* Will be used instead by browsers that do not support `row-gap` *\/\n  row-gap: 2rem; \/* Used by browsers that support `row-gap` *\/\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">row-gap: normal | &lt;length-percentage><\/code><\/pre>\n\n\n\n<ul class=\"ticss-60c428aa\"><li><strong>Initial value:<\/strong> <code>normal<\/code><\/li><li><strong>Applies to:<\/strong> multi-column containers, flex containers, grid containers<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Percentages:<\/strong> refer to corresponding dimension of the content area<\/li><li><strong>Computed value:<\/strong> specified keyword, else a compute <code>&lt;length-percentage&gt;<\/code> value<\/li><li><strong>Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n\n<p>This syntax means that <code>row-gap<\/code> accepts a <code>normal<\/code> value (which is the default) or a specific length in units (e.g. 40px) or percentage (e.g. 5%).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<p>Aside from the <code>normal<\/code> value, <code>row-gap<\/code> accepts numbers and percentages. &#8220;Normal&#8221; means whatever is standard for the browser.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Default value *\/\nrow-gap: normal;\n\n\/* &lt;length> values *\/\nrow-gap: 50px;\nrow-gap: 2rem;\nrow-gap: 1.5em;\nrow-gap: 5vw;\nrow-gap: 25ch;\n\n\/* &lt;percentage> value *\/\nrow-gap: 15%;\n\n\/* Global values *\/\nrow-gap: inherit;\nrow-gap: initial;\nrow-gap: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwageWB\" src=\"\/\/codepen.io\/anon\/embed\/VwageWB?height=600&amp;theme-id=1&amp;slug-hash=VwageWB&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwageWB\" title=\"CodePen Embed VwageWB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p>Browser support can be split up by whether or not <code>row-gap<\/code> is supported by CSS Grid or Flexbox.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-layout-support\">Grid layout support<\/h4>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">16+<\/td><td class=\"has-text-align-center\" data-align=\"center\">61+<\/td><td class=\"has-text-align-center\" data-align=\"center\">66+<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">53+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">81+<\/td><td class=\"has-text-align-center\" data-align=\"center\">12+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_row-gap_grid_context\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-flexbox-layout-support\">Flexbox layout support<\/h4>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">84+<\/td><td class=\"has-text-align-center\" data-align=\"center\">63+<\/td><td class=\"has-text-align-center\" data-align=\"center\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">70+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_row-gap_flex_context\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-align-3\/#propdef-row-gap\" rel=\"noopener\">CSS Box Alignment Module Level 3<\/a> (Specification, Editor&#8217;s Draft)<\/li><li><a href=\"https:\/\/css-tricks.com\/chromium-lands-flexbox-gap\/\">Chromium lands Flexbox gap<\/a> (CSS-Tricks)<\/li><li><a href=\"https:\/\/css-irl.info\/exciting-things-on-the-horizon-for-css-layout\/\" rel=\"noopener\">Exciting Things on the Horizon For CSS Layout<\/a> (CSS {In Real Life })<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The row-gap property in CSS sets space (formally called &#8220;gutters&#8221;) between rows in CSS Grid, Flexbox, and CSS Columns layouts.<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13945,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-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":[],"acf":[],"jetpack-related-posts":[{"id":321933,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-gap\/","url_meta":{"origin":321902,"position":0},"title":"column-gap","date":"September 28, 2020","format":false,"excerpt":"The CSS column-gap property sets space (also called \"gutters\") between between columns in CSS Grid, Flexbox, and CSS Columns layouts. Context If you're wondering why we have a column-gap property when there's already a grid-column-gap one, you're not alone! In fact, column-gap effectively replaces grid-column-gap. By dropping the grid- prefix,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","url_meta":{"origin":321902,"position":1},"title":"gap","date":"August 13, 2020","format":false,"excerpt":"The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts. \/* Grid layout *\/ .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image.jpeg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":321902,"position":2},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365263,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-rows\/","url_meta":{"origin":321902,"position":3},"title":"grid-template-rows","date":"April 25, 2022","format":false,"excerpt":"The grid-template-rows CSS property is part of the CSS Grid Layout specification, defining the rows of a grid container by specifying the size of the grid tracks and its line names. .app-layout { display: grid; grid-template-rows: auto 1fr auto; } One thing to cover before we jump into the grid-template-rows\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":372340,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid\/","url_meta":{"origin":321902,"position":4},"title":"grid","date":"August 8, 2022","format":false,"excerpt":"The grid CSS property is a shorthand that allows you to set all the implicit and the explicit grid properties in a single declaration. .grid-container { display: grid; grid: auto-flow dense \/ repeat(5, 150px); } The above example sets grid-template-columns to repeat(5, 150px) and grid-auto-flow to row dense which creates\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":366092,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template\/","url_meta":{"origin":321902,"position":5},"title":"grid-template","date":"May 26, 2022","format":false,"excerpt":"The grid-template CSS property is a shorthand that allows you to define grid columns, rows, and areas in a CSS grid container with one declaration. .grid-container { display: grid; grid-template: \"header header\" \"sidebar main\" 1fr \"footer footer\" min-content \/ 250px 1fr; } Constituent properties As mentioned, grid-template is a shorthand\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\/321902"}],"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=321902"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321902\/revisions"}],"predecessor-version":[{"id":350920,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321902\/revisions\/350920"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13945"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=321902"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}