Quest Academy

CSS Grid

Introduction to the CSS Grid Challenges

CSS Grid ช่วยให้คุณสร้างการออกแบบเว็บที่ซับซ้อนได้อย่างง่ายดาย ทำงานโดยเปลี่ยนองค์ประกอบ HTML ให้เป็น container แบบ grid ที่มีแถวและคอลัมน์เพื่อให้คุณวางองค์ประกอบลูกในที่ที่คุณต้องการภายในตาราง

CSS Grid

Create Your First CSS Grid

Add Columns with grid-template-columns

Add Rows with grid-template-rows

Use CSS Grid units to Change the Size of Columns and Rows

Create a Column Gap Using grid-column-gap

Create a Row Gap using grid-row-gap

Add Gaps Faster with grid-gap

Use grid-column to Control Spacing

Use grid-row to Control Spacing

Align an Item Horizontally using justify-self

Align an Item Vertically using align-self

Align All Items Horizontally using justify-items

Align All Items Vertically using align-items

Divide the Grid Into an Area Template

Place Items in Grid Areas Using the grid-area Property

Use grid-area Without Creating an Areas Template

Reduce Repetition Using the repeat Function

Limit Item Size Using the minmax Function

Create Flexible Layouts Using auto-fill

Create Flexible Layouts Using auto-fit

Use Media Queries to Create Responsive Layouts

Create Grids within Grids

Be the first to add a review.

Please, login to leave a review
Add to Wishlist