# CSS display: contents; is awesome for grid and flex box layouts #css #webdevelopment

## Метаданные

- **Канал:** Tom Is Loading
- **YouTube:** https://www.youtube.com/watch?v=SQEuNaIUaMk
- **Дата:** 19.05.2026
- **Длительность:** 1:55
- **Просмотры:** 1,294
- **Источник:** https://ekstraktznaniy.ru/video/51682

## Описание

The display: contents; CSS property is one that you likely learned early into learning CSS, but may have never come back it. From time to time it's the perfect tool for the job, especially when working with component frameworks where you're trying to compose several elements together into a single grid or flex layout.

## Транскрипт

### Segment 1 (00:00 - 01:00) []

I feel like I always forget that display contents is even a thing until once every 6 months when I randomly end up needing it. So, if you look at this basic little example that I have right here, I have a wrapping div with a class of wrapper and these two different card sections within it. Each of these have classes of group one and group two and these come together to make this little grid that I have here. But, you can imagine that maybe this bottom section I use in multiple different parts of the landing page and it has, you know, different styling on it. In this case, it just has different gap. Maybe I need to be able to add some, you know, distinct styling to this or different breakpoints or something like that. So, I do want to wrap all these in their own divs as opposed to just having, you know, each of these cards flat within this wrapper. But, I also want them to respect the grid styling or the flex styling of this wrapper. So, if I come back over to my globals. scss right here, I can see that I have these two classes down here, group one and group two. Each of them are just grids, but then they have different amounts of gap. And on their parent, I've added a display grid and a gap of two rem, but right now that gap is just between these two vertically. Oh, there we go. Sorry, I didn't save. And if I want to make this whole thing a 12-column grid, come back over to my wrapper, make it a 12-column grid. But, of course, these groups are still just individual elements right now, right? I just have group one and group two, not like the full cards flattened out within the context of this parent grid. Now, what I could just do is like actually pull these cards out, but again, maybe I want to, you know, select this group one with JavaScript or maybe I have some conditional styling or something based on these individual classes. So, what I could do instead is to each of those divs, so I'm kind of doing a shorthand here, I've instead just saying, you know, apply display contents to each of these. But, stepping back, what I could do is say, "For this wrapper, any of those immediate divs inside of it, in this case group one and group two, add a display of contents. " And that will essentially flatten all of the contents within each of those groups such that it's just sitting directly inside of that wrapper. So, it's like taking these wrapping divs and saying, "Hey, don't display none, don't completely hide it, just pretend like your actual element, these divs, don't exist. " Fun little trick and by the way, if you want this little content section, it's free on my website, so go check it out.