Summary

In this lesson, you've laid out the top of the shelter's home page and learned that:

• Each value of display has its class: block, inline-block, inline, flex, grid. hidden is display: none: the element isn't shown and takes up no space.
• flex makes a flex container. flex-row (the default) and flex-col set the direction of its main axis.
• gap-* sets the gaps between flex items and grid cells, with the numbers of the spacing scale; gap-x-* and gap-y-* set them separately.
• justify-* spreads the items along the main axis (justify-content): justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly.
• items-* places them on the cross axis (align-items): items-stretch (the default), items-start, items-center, items-end, items-baseline.
• flex-wrap moves the items that don't fit to the next line. grow and flex-1 make an item grow into the free space, and shrink-0 keeps it from getting narrower.
• grid with grid-cols-* makes a grid of equally wide columns (repeat(2, minmax(0, 1fr))). col-span-*, col-span-full and row-span-* stretch an item over several cells.
• To center items both ways, use flex items-center justify-center and a height, such as min-h-96. A single child can also be centered with grid place-items-center.
• relative, absolute, fixed and sticky set position, and top-*, right-*, bottom-*, left-* and inset-* set the offsets. An absolute element is placed in its nearest ancestor with a position, usually one with relative.
• sticky top-0 keeps a header at the top of the window, and z-* decides which element is on top.
• As in the earlier lessons: when two classes set the same property, their order in the class attribute doesn't decide which one wins, so replace a class instead of adding a second one.

Your page now has its layout, but it doesn't react to the visitor yet. In the next lesson, Hover, Focus and Other States, you'll make its buttons and links change when the mouse is over them or when they're clicked.

Before you go, a short exercise. We've added a footer at the bottom of the page, with three columns of information and a row with the copyright and a link back to the top. For now, everything in it is one below another.