{"id":318980,"date":"2020-08-13T15:49:50","date_gmt":"2020-08-13T22:49:50","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=318980"},"modified":"2022-09-22T11:33:17","modified_gmt":"2022-09-22T18:33:17","slug":"gap","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","title":{"rendered":"gap"},"content":{"rendered":"\n<p>The gap property in CSS is a shorthand for <code>row-gap<\/code> and <code>column-gap<\/code>, specifying the size of gutters, which is the space between rows and columns within <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//complete-guide-grid///">grid<\/a>, <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//f//flex///">flex<\/a>, and <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//c//columns///">multi-column<\/a> layouts.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Grid layout *\/\n.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 1fr 2fr 1fr;\n  gap: 30px 20px;\n}\n\n\/* Flex layout *\/\n.container {\n\u00a0 display: flex;\n\u00a0 gap: 10%;\n}\n\n\/* Multi-column layout *\/\n.container {\n  column-count: 5;\n  gap: 20px;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1208\" height=\"975\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//08//DKNteyUQ.png?resize=1208%2C975&amp;ssl=1\%22 alt=\"Diagram showing six boxes in two rows of three with gaps between them to illustrate the effect of the gap property.\" class=\"wp-image-318983\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/DKNteyUQ.png?w=1208&amp;ssl=1 1208w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/DKNteyUQ.png?resize=300%2C242&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/DKNteyUQ.png?resize=1024%2C826&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/DKNteyUQ.png?resize=768%2C620&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/DKNteyUQ.png?resize=1000%2C807&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Use the slider in the demo below to see the <code>gap<\/code> property in action:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzwmaBY\" src=https://css-tricks.com/"////codepen.io//anon//embed//YzwmaBY?height=650&amp;theme-id=1&amp;slug-hash=YzwmaBY&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzwmaBY\" title=\"CodePen Embed YzwmaBY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<p><code>gap<\/code> accepts one or two values:<\/p>\n\n\n\n<ul><li>A single value sets both <code>row-gap<\/code> and <code>column-gap<\/code> by the same value.<\/li><li>When two values are used, the first sets the <code>row-gap<\/code> and the second sets the <code>column-gap<\/code>.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n\u00a0 gap: 1rem;\n\u00a0 \/* Is equivalent to:\n\u00a0 * \u00a0row-gap: 1rem;\n\u00a0 * \u00a0column-gap: 1rem\n\u00a0 *\/\n\u00a0\u00a0\n\u00a0 gap: 10px 15%;\n\u00a0 \/* Is equivalent to:\n\u00a0 * \u00a0row-gap: 10px;\n\u00a0 * \u00a0column-gap: 15%;\n\u00a0 *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"explanation\">The specification for the CSS Grid Layout Module defined the space between grid tracks using the <code>grid-gap<\/code> property. <code>gap<\/code> is <a href=https://css-tricks.com/"https:////css-tricks.com//chromium-lands-flexbox-gap///">intended to replace it<\/a> so that gaps can be defined in multiple CSS layout methods, like flexbox, but <code>grid-gap<\/code> still needs to be used in instances where a browser may have implemented <code>grid-gap<\/code> but has yet to start supporting the newer <code>gap<\/code> property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<p><code>gap<\/code> accepts the following values:<\/p>\n\n\n\n<ul><li><strong><code>normal<\/code>:<\/strong> (Default) The browser will specify a used value of 1em for multi-column layout and 0px for all other layout contexts (i.e. grid and flex).<\/li><li><strong><code>&lt;length&gt;<\/code>:<\/strong> Any valid and non-negative CSS length, such as <code>px<\/code>, <code>em<\/code>, <code>rem<\/code> and <code>%<\/code>, among others.<\/li><li><strong><code>&lt;percentage&gt;<\/code>: <\/strong>The size of the gap as a non-negative percentage value relative to the dimension of the element. (See below for details.)<\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property&#8217;s default setting, which is <code>normal<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the gap value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>gap<\/code> from the element.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-percentages-in-gap-properties\">Percentages in gap properties<\/h3>\n\n\n<p>When the size of a container in the gap dimension is definite, <code>gap<\/code> resolves percentages against the size of the container&#8217;s content box in any layout types.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//08//image.jpeg?resize=449%2C344&amp;ssl=1\%22 alt=\"\" class=\"wp-image-318984\" width=\"449\" height=\"344\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image.jpeg?w=599&amp;ssl=1 599w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image.jpeg?resize=300%2C230&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In other words, when the browser knows the size of the container, it can calculate the percentage value of the <code>gap<\/code>. For example, when the container&#8217;s height is 100px and the <code>gap<\/code> is set to 10%, browser knows that 10% of 100px is 10px.<\/p>\n\n\n\n<p>But when the browser doesn&#8217;t know the size, it will wonder, \u201c10% of what?\u201d In these cases, <code>gap<\/code> behaves differently based on the layout type.<\/p>\n\n\n\n<p><strong>In a grid layout,<\/strong> percentages resolve against zero for determining intrinsic size contributions, but resolve against the element\u2019s content box when laying out the box\u2019s contents, meaning it will put space between items but the space doesn&#8217;t affect the container&#8217;s size.<\/p>\n\n\n\n<p>In this demo, the container&#8217;s height is not definite. See what happens when you increase the <code>gap<\/code> size. Then set the <code>gap<\/code> in pixel units and try again:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEQgoYW\" src=https://css-tricks.com/"////codepen.io//anon//embed//ZEQgoYW?height=450&amp;theme-id=1&amp;slug-hash=ZEQgoYW&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEQgoYW\" title=\"CodePen Embed ZEQgoYW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><strong>In a flex layout,<\/strong> percentages resolve against zero in all cases, meaning that gaps will not apply when the size of the container is not known to the browser:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pogMVEg\" src=https://css-tricks.com/"////codepen.io//anon//embed//pogMVEg?height=450&amp;theme-id=1&amp;slug-hash=pogMVEg&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pogMVEg\" title=\"CodePen Embed pogMVEg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-the-calc-function-with-gap\">Using the calc() function with gap<\/h3>\n\n\n<p>You can use <a href=https://css-tricks.com/"https:////css-tricks.com//a-complete-guide-to-calc-in-css///"><code>calc()<\/code> function<\/a> to specify the size of the <code>gap<\/code> but, at the time of this writing, there is <a href=https://css-tricks.com/"https:////caniuse.com//%23feat=mdn-css_properties_gap_grid_context_calc_values/" rel=\"noopener\"><strong>no support for it<\/strong><\/a><strong> on Safari and iOS.<\/strong><\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3,9\"><code markup=\"tt\">.flex-layout {\n\u00a0 display: flex;\n\u00a0 gap: calc(5vh + 5px) calc(5vw + 5px);\n}\n\u2028\n.grid-layout {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: repeat(3, 1fr);\n\u00a0 gap: calc(5vmin + 5px);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-examples\">Examples<\/h3>\n\n\n<p>The <code>gap<\/code> property is designed for use in grid, flex and multi-column layouts. Let\u2019s check out some examples.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-layout\">Grid layout<\/h4>\n\n\n<p>In the following demo, you can see <code>gap<\/code> being used to specify the <code>row-gap<\/code> and <code>column-gap<\/code> properties on a grid container, defining the gutters between grid rows and grid columns, respectively:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJMKaZE\" src=https://css-tricks.com/"////codepen.io//anon//embed//OJMKaZE?height=450&amp;theme-id=1&amp;slug-hash=OJMKaZE&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJMKaZE\" title=\"CodePen Embed OJMKaZE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-flex-layout\">Flex layout<\/h4>\n\n\n<p>Applying gap to the <strong>main axis<\/strong> of a flex container indicates spacing <strong>between flex items<\/strong> in a single line of the flex layout.<\/p>\n\n\n\n<p>Here\u2019s <code>column-gap<\/code> used in a row direction:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYrgVMr\" src=https://css-tricks.com/"////codepen.io//anon//embed//zYrgVMr?height=450&amp;theme-id=1&amp;slug-hash=zYrgVMr&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYrgVMr\" title=\"CodePen Embed zYrgVMr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s <code>row-gap<\/code> used in a column direction:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzwmoBE\" src=https://css-tricks.com/"////codepen.io//anon//embed//YzwmoBE?height=450&amp;theme-id=1&amp;slug-hash=YzwmoBE&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzwmoBE\" title=\"CodePen Embed YzwmoBE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Applying <code>gap<\/code> to the <strong>cross axis<\/strong> of a flex container indicates spacing <strong>between flex lines<\/strong> of the flex layout.<\/p>\n\n\n\n<p>Here&#8217;s <code>row-gap<\/code> in a row direction:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYLoqbp\" src=https://css-tricks.com/"////codepen.io//anon//embed//vYLoqbp?height=450&amp;theme-id=1&amp;slug-hash=vYLoqbp&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYLoqbp\" title=\"CodePen Embed vYLoqbp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s <code>column-gap<\/code> in a column direction:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwrXzvQ\" src=https://css-tricks.com/"////codepen.io//anon//embed//RwrXzvQ?height=450&amp;theme-id=1&amp;slug-hash=RwrXzvQ&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwrXzvQ\" title=\"CodePen Embed RwrXzvQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-multi-column-layout\">Multi-column layout<\/h4>\n\n\n<p><code>column-gap<\/code> appears in <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//c//columns///">multi-column<\/a> layouts to create gaps between column boxes, but note that <code>row-gap<\/code> has no effect since we\u2019re only working in columns. <code>gap<\/code> can still be used in this context, but only the <code>column-gap<\/code> will be applied.<\/p>\n\n\n\n<p>As you can see in the next demo, although the <code>gap<\/code> property has a value of 2rem, it&#8217;s only separating items horizontally instead of both directions since we\u2019re working in columns:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNrVqyL\" src=https://css-tricks.com/"////codepen.io//anon//embed//WNrVqyL?height=800&amp;theme-id=1&amp;slug-hash=WNrVqyL&amp;default-tab=result\%22 height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNrVqyL\" title=\"CodePen Embed WNrVqyL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-more-you-know\">The more you know\u2026<\/h3>\n\n\n<p>There are a couple of things worth noting about working with the <code>gap<\/code> property.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-it-s-a-nice-way-to-prevent-unwanted-spacing\">It\u2019s a nice way to prevent unwanted spacing<\/h4>\n\n\n<p>Have you ever used margins to create spacing between elements? If we\u2019re not careful, we can end up with extra spacing before and after the group of items.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWNqJzp\" src=https://css-tricks.com/"////codepen.io//anon//embed//NWNqJzp?height=250&amp;theme-id=1&amp;slug-hash=NWNqJzp&amp;default-tab=result\%22 height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWNqJzp\" title=\"CodePen Embed NWNqJzp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Solving that usually requires adding negative margins or resorting to pseudo-selectors to remove margin from specific items. But the nice thing about using <code>gap<\/code> in more modern layout methods is that you only have space <em>between<\/em> items. The extra cruft at the start and end is never an issue!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abdegBz\" src=https://css-tricks.com/"////codepen.io//anon//embed//abdegBz?height=550&amp;theme-id=1&amp;slug-hash=abdegBz&amp;default-tab=result\%22 height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abdegBz\" title=\"CodePen Embed abdegBz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But, hey, if you <em>want<\/em> to have space around the items while using <code>gap<\/code>, put <code>padding<\/code> around the container like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n\u00a0 display: flex;\n\u00a0 gap: 1rem;\n\u00a0 padding: 1rem;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-gutter-size-is-not-always-equal-to-the-gap-value\">Gutter size is not always equal to the gap value<\/h4>\n\n\n<p>The <code>gap<\/code> property is not the only thing that can put space between items. Margins, paddings, <code>justify-content<\/code> and <code>align-content<\/code> can also increase the size of the gutter and affect the actual <code>gap<\/code> value.<\/p>\n\n\n\n<p>In the following example, we\u2019re setting a 1em <code>gap<\/code> but, as you can see, there is much more space between the items, caused by the use of distributed alignments, like <code>justify-content<\/code> and <code>align-content<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNbKrwz\" src=https://css-tricks.com/"////codepen.io//anon//embed//oNbKrwz?height=600&amp;theme-id=1&amp;slug-hash=oNbKrwz&amp;default-tab=result\%22 height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNbKrwz\" title=\"CodePen Embed oNbKrwz\" 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>Feature queries are usually a nice way to check if a browser supports a specific property, but in this case, if you check for the <code>gap<\/code> property in flexbox, you may get a false positive because a feature query won\u2019t distinguish between layout modes. In other words, it might be supported in a flex layout which results in a positive result, but it is actually not supported if it\u2019s used in a grid layout.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-layout-1\">Grid layout<\/h4>\n\n\n<figure class=\"wp-block-table ticss-12dd43bc\"><table><thead><tr><th>IE<\/th><th>Edge<\/th><th>Firefox<\/th><th>Chrome<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>16+<\/td><td>61+<\/td><td>66+<\/td><td>12+<\/td><td>53+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-f541006c\"><table><thead><tr><th>iOS Safari<\/th><th>Opera Mobile<\/th><th>Android Browser<\/th><th>Chrome for Android<\/th><th>Firefox for Android<\/th><\/tr><\/thead><tbody><tr><td>12+<\/td><td>No<\/td><td>81+<\/td><td>84+<\/td><td>68+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-layout-with-calc-values\">Grid layout with calc() values<\/h4>\n\n\n<figure class=\"wp-block-table ticss-cb6fe179\"><table><thead><tr><th>IE<\/th><th>Edge<\/th><th>Firefox<\/th><th>Chrome<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>84+<\/td><td>79+<\/td><td>84+<\/td><td>No<\/td><td>69+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-c879cbfc\"><table><thead><tr><th>iOS Safari<\/th><th>Opera Mobile<\/th><th>Android Browser<\/th><th>Chrome for Android<\/th><th>Firefox for Android<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>81+<\/td><td>84+<\/td><td>68+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-grid-layout-with-percentage-value\">Grid layout with percentage value<\/h4>\n\n\n<figure class=\"wp-block-table ticss-b2fbe88e\"><table><thead><tr><th>IE<\/th><th>Edge<\/th><th>Firefox<\/th><th>Chrome<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>84+<\/td><td>79+<\/td><td>84+<\/td><td>No<\/td><td>69+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-3acb334f\"><table><thead><tr><th>iOS Safari<\/th><th>Opera Mobile<\/th><th>Android Browser<\/th><th>Chrome for Android<\/th><th>Firefox for Android<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>81+<\/td><td>84+<\/td><td>68+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-flex-layout-1\">Flex layout<\/h4>\n\n\n<p>The <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-align-3//%23gaps/" rel=\"noopener\">specification<\/a> for using <code>gap<\/code> with flexbox is currently in Working Draft status.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=flexbox-gap\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">84<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">63<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">84<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">14.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">14.5-14.8<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-multi-column-layout-1\">Multi-column layout<\/h4>\n\n\n<figure class=\"wp-block-table ticss-841657a3\"><table><thead><tr><th>IE<\/th><th>Edge<\/th><th>Firefox<\/th><th>Chrome<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>84+<\/td><td>79+<\/td><td>84+<\/td><td>No<\/td><td>69+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-5ac93cf0\"><table><thead><tr><th>iOS Safari<\/th><th>Opera Mobile<\/th><th>Android Browser<\/th><th>Chrome for Android<\/th><th>Firefox for Android<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>81+<\/td><td>84+<\/td><td>68+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////drafts.csswg.org//css-align-3//%23gaps/" rel=\"noopener\">CSS Box Alignment Module Level 3<\/a><\/li><li><a href=https://css-tricks.com/"https:////web.dev//flexbox-gap///" rel=\"noopener\">Chromium lands Flexbox gap<\/a> (Ticket <a href=https://css-tricks.com/"https:////bugs.chromium.org//p//chromium//issues//detail?id=761904\%22 rel=\"noopener\">#761904<\/a>)<\/li><li><a href=https://css-tricks.com/"https:////webkit.org//css-status//#property-gap\" rel=\"noopener\">WebKit CSS Feature Status<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//complete-guide-grid/">Grid Layout<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//a-guide-to-flexbox/">Flexbox Layout<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//c//column-gap/">Multi-Column Layout<\/a><\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-css-grid-layout-intro?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">CSS Grid Layout: An Introduction<\/a> (Alligator.io)<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":0,"parent":13923,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318980"}],"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\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=318980"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318980\/revisions"}],"predecessor-version":[{"id":373676,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/318980\/revisions\/373676"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=318980"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=318980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}