Using 'display: contents' in CSS for grid items & semantic HTML

In this CSS tutorial, I show you how to use 'display: contents;' to maintain semantic markup. In CSS Grid, only direct child elements of the grid container act as grid items. If you want child elements of your grid items to take that role instead, simply use the 'display' property along with the 'contents' keyword on the grid item that you would like to remove from your page. This will clear the background, border and padding of the original grid item, just as if it did not exist in your HTML structure. Therefore, in terms of semantics, you do not have to make any trade-offs. Coding examples in this tutorial include removing a main element to make its child div become grid items in the layout. Get the code on CodePen: https://codepen.io/isaacasante/pen/vMXNZv