The Art of Doing - Web Development for Beginners - Grid Basics

This video tutorial introduces the CSS grid layout system, explaining its two-dimensional layout capabilities compared to Flexbox. It covers setting up HTML structure, applying basic and advanced grid styling, and creating responsive designs. The tutorial also demonstrates customizing grid layouts using various CSS properties, including grid template rows, columns, and the min-max function for dynamic sizing.

What is the primary difference between CSS Grid and Flexbox?

• Grid is for two-dimensional layouts, Flexbox is for one-dimensional layouts.

• Grid is for one-dimensional layouts, Flexbox is for two-dimensional layouts.

• Grid is only for vertical layouts, Flexbox is only for horizontal layouts.

• Grid and Flexbox are both for two-dimensional layouts.

Which CSS property is used to set the background color of grid items?

• color

• background-color

• grid-color

• item-color

How do you define the number of rows in a CSS Grid?

• grid-row-count

• grid-template-rows

• grid-rows

• grid-row-template

What does the 'justify-content' property do in a CSS Grid?

• Aligns grid items vertically.

• Aligns grid items horizontally.

• Defines the number of grid columns.

• Sets the spacing between grid items.

How can you center a grid within its container?

• Set 'justify-content: center'.

• Use 'align-content: center'.

• Use 'center-grid: true'.

• Apply 'grid-align: center'.

What does the 'repeat' function do in a CSS Grid?

• Repeats the grid template for multiple containers.

• Repeats the grid items in a container.

• Repeats the background image in a grid.

• Sets a number of rows or columns to a specific size.

Which unit is used in CSS Grid to create flexible column widths?

• px

• em

• fr

• pt

Which property would you use to automatically create rows of a specific size?

• grid-auto-rows

• grid-row-size

• grid-template-rows

• grid-row-auto

What is the purpose of the 'minmax' function in CSS Grid?

• To specify the minimum and maximum number of grid columns.

• To define the minimum and maximum size of grid items.

• To set the minimum and maximum width of the grid container.

• To set the minimum and maximum height of the entire grid.

How can you make a grid item span multiple columns?

• Set 'grid-column-width' to a larger value.

• Use the 'span' keyword with 'grid-column'.

• Set 'grid-column-start' and 'grid-column-end'.

• Use the 'grid-column-span' property.