- defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout. It is a shorthand for the following properties: "row-gap", "column-gap".
Note: The gap property was formerly known as grid-gap.
The grid-* properties were added early when CSS Grid's specifications were being drafted, and later deprecated when gap became more generalized. Browsers still support these deprecated grid-* properties and merely treat them as if the "grid-prefix" is not present. Hence, grid-gap is the same as gap, grid-column-gap is the same as "column-gap" and grid-row-gap is the same as "row-gap".
row-gap : sets the size of the gap between the rows in a grid or flexbox layout
column-gap : sets the size of the gap between the columns in a grid, flexbox or multi-column layout
initial : sets this property to its default value
inherit : inherits this property from its parent element.
JavaScript syntax: object.style.gap="50ox 100px"
grid gaps are supported in all browsers and they're quite simple to understand in this context:
row-gap introduces space between row tracks; column-gap introduces space between column tracks.
Things do get a little more complicated when "writing-mode" is used : the default writing mode on the web is horizontal, from left to right, but there are vertical writing modes as well, and when that happens, columns become horizontal and rows are vertical. Always pay attention to writing-mode as it can make it less intuitive than it usually is.
flexbox gaps in Flexbox layouts get a little more complicated.
By default, items within the flex container are stacked from left to right on the same horizontal line. In this case, column-gap is applied between items and row-gap does nothing. That's because there is only one line (or row).
Switching the flex-direction of the container to column, the items are stacked vertically, from top to bottom. Column-gap does not work in the "column direction", and the row-gap needs to be used to. As an alternative, we can use the "gap shorthand" with one value, which would apply the same gap in both directions and, therefore, work in both cases.
To summarize, "colum-gap" always works vertically (assuming the default writing-mode), and "row-gap" always works horizontally. This does not depend on the direction of the flex container.
with line wrapping, items are allowed to wrap on multiple lines with flex-wrap: wrap if there isn't enough space to fit everything in a single line.
In this case, the column-gap is still applied vertically between items, and row-gap is applied horizontally between the two flex lines.
There's one interesting difference between this and grid. The column gaps don't necessarily align across flex lines. That's because of "justify-content: center", which centers items within their flex lines. This way, we can see that each flex line is a separate layout, where gaps apply independently of other lines.
multi-column gaps don't quite work the same as grid or Flexbox.
There are three notable differences: 1/ row-gap has no effect, 2/ column-gap has a non-0 default value, and 3/ gaps can be styled.
row-gap has no effect: in multi-column layouts, there aren't any rows to separate. That means only column-gap is relevant (as is the gap shorthand).
unlike in grid and Flexbox, column-gap has a default value of 1em in multi-column layouts (as opposed to 0). So, even when no gap is specified at all, the columns of content are still visually separated. The default gap can, of course, be overridden but it's a good default to have.
We can style the empty gap between columns in a multi-column layout. We use the "column-rule property", which works like "border".
example: mult-column gap
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, loked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Styling gap in Flexbox and CSS Grid would be really useful, but it isn't supported anywhere today. The good news is that it could be in the near future.
In the meantime, there are ways around this.
One is to give the grid container a background color, then a different color for the items, and finally a gap to make the container color show through.
While this works, it means we're unable to use gaps to introduce space between items. The gap here acts as a "border width instead". So, to visually separate the items out a bit more, we need to use padding or margin on the items, which isn't as great.
example: styling the gap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, tellus vel imperdiet vestibulum, nunc nunc pulvinar velit, quis posuere odio diam eu augue.
Proin quis nulla enim. Vivamus condimentum gravida risus, vel euismod risus faucibus ut. Cras id interdum lorem. Etiam imperdiet, sem ac congue tincidunt, ipsum eros varius enim, in rhoncus nunc arcu id sem.
Vestibulum luctus convallis mattis. Donec maximus ipsum non velit pellentesque, non blandit ex feugiat. Fusce hendrerit enim a orci sagittis, vitae ultrices ante rhoncus. Donec bibendum erat vel sapien luctus auctor. Mauris scelerisque dignissim justo, dapibus dictum nunc malesuada quis. Curabitur aliquet magna eget nisl commodo sagittis. Aenean et pellentesque mi, eget gravida dolor.
Curabitur scelerisque sapien quis erat venenatis, et congue ex pretium. Donec iaculis sagittis imperdiet.
Morbi et orci consectetur augue lacinia malesuada. Vestibulum aliquam ante nec orci tempor, eu molestie nunc egestas. Phasellus id volutpat eros. Sed et ullamcorper lacus. Nullam egestas eleifend mi ac feugiat. Praesent at augue tempor, malesuada elit vitae, pellentesque urna. Nullam blandit est in odio commodo, sed finibus turpis posuere. Maecenas nibh lectus, suscipit id porta et, elementum in mauris. Suspendisse eleifend, purus vel vestibulum commodo, lacus elit auctor eros, nec luctus diam ante vel odio.
Aliquam in sem sagittis, elementum ipsum quis, eleifend risus. Vestibulum eu porttitor nunc, ut scelerisque sapien. Pellentesque felis odio, rhoncus in euismod et, suscipit ultricies lacus. Pellentesque dapibus varius interdum. Quisque hendrerit libero nunc, eu scelerisque libero interdum ac.
Another workaround uses"margin" and/or "padding" to add visual space between elements of a layout.
The "gap property" is just one part of the empty space created between boxes in a layout container. "margin", "padding', and "alignment", all may increase the empty space on top of what gap already defines.
There are four different types of empty space between two consecutive flex items:
Between two consecutive items, the gap defines the minimum space between these items. There can be more, like in this case, but there can never be less space. Margin pushes items even further apart, but unlike gap, it adds space at both sides of all items. Padding provides some space inside each item. Finally, and only because there is enough remaining space, content distribution kicks in and distributes the items evenly within the flex line, according to the "space-around" value.
Curabitur scelerisque sapien quis erat venenatis, et congue ex pretium. Donec iaculis sagittis imperdiet.