CSS Grid Layout

What you should see

You should see eleven panels (scroll inside the result to reach them all). In panel 1 the first and third cards stack the six subjects one under another, the second wraps them into ragged lines, and the fourth puts them in two neat columns; below them the nav bar has the name on the left and the links on the right. Panel 2 shows one, two and three equal columns, a two-thirds and one-third split, a fixed 200px box beside a stretchy one, and a last card whose third box pokes out past the dashed border. In panel 3 row 1 is two lines tall, then a fixed 80px, then the boxes move apart with gaps. In panel 4 the first two cards look identical and the third has three 200px boxes per row with empty space on the right. In panel 5 the phone box squeezes four columns, lets four 80px columns spill out, and fits two columns, while the wider box fits all four in a row. Panel 6 shows the same six subjects in 3, 2 and 1 columns, then two boxes stretched across (auto-fit) and two narrow boxes with an empty column beside them (auto-fill). In panel 7 the dark box 1 sits in one cell, then takes two columns (twice), the full width, and two rows; the last card is the featured-course grid. Panel 8 shows the page plan with the sidebar beside the main content, and the phone plan with the main content above the sidebar. In panel 9 the boxes fill their cells, shrink to the middle left-right, up-down, both ways, sit at the top, and in the last two cards the whole small grid moves to the middle and to the bottom. In panel 10 the first two Hello boxes are in the dead centre and the third fills its box. Panel 11 is Asha Kumar's profile with three course cards and four green skill pills. There is no JavaScript on this page, so the Console prints nothing.