CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) - Aligning Grid tracks

This video tutorial explains how to align grid tracks within a container using CSS properties similar to flexbox. It covers the use of 'justify content' for horizontal alignment and 'align content' for vertical alignment, detailing various values like start, center, end, space between, space around, and space evenly. The tutorial also includes a demonstration of modifying container and grid item styles to better illustrate these properties.

Which CSS properties are used to align grid tracks inside a container?

• flex-direction and align-items

• display and position

• justify-content and align-content

• grid-template-columns and grid-template-rows

What does the 'justify-content: center' value do to a grid track?

• Aligns the grid track to the right

• Centers the grid track within the container

• Aligns the grid track to the left

• Distributes space evenly around the grid items

How does 'justify-content: space-between' affect grid items?

• Centers grid items within the container

• Creates equal space between grid items without space at the edges

• Aligns grid items at the end of the container

• Places grid items at the start of the container

What is the primary difference between 'justify-content' and 'align-content'?

• 'justify-content' aligns items vertically, 'align-content' aligns them horizontally

• Neither property affects the alignment of grid items

• 'justify-content' aligns items horizontally, 'align-content' aligns them vertically

• Both properties align items in the same direction

Which value of 'align-content' would place grid tracks at the bottom of the container?

• space-around

• end

• center

• start