Categories
CSS HTML

Advanced Grid Properties Exercise: Density 2024

In this exercise, which we will typically do in class, we will examine some advanced grid properties, including grid-auto-flow and subgrid.

Please download the starter files and open them up in Visual Studio Code (or whatever other code editor you use),.

The supplied project files include an html file and a partially-completed stylesheet.

In the html, we have a header, and a main element with twelve articles.

Some articles have a class of feature-article and some have a class of feature-article-follow-up; some articles have no class attributes at all.

At a suitable screen width, we have the main split into three columns. Feature articles will cover all three columns. Follow-up articles will take two columns.

Articles without either class will take one column. But they will have a css super power: the ability to leap into the nearest available space.

Finally, our feature-images will arrange their child elements to line up with the grid columns on the main. Grid normally involves parents arranging children, but subgrid will allow us to invite grandchildren to the party!

Time permitting, we will also explore how to transcend the sRGB color gamut that CSS has been a imprisoned by for more than two decades.