The easiest way to get started with CSS Grid
2.6 هزار بار بازدید -
2 سال پیش
-
A simple, straightforward guide to
A simple, straightforward guide to CSS Grid using grid-template-areas property to visually set the grid structure. It will give you the confidence to start using CSS Grid comfortably while understanding the basics of creating grid layouts.
🎨 Codepen demo: https://codepen.io/ZoranJambor/pen/Po...
📖 Timestamps
00:00 Intro
00:36 How grid-template-areas property works
03:49 How to adjust the size of grid rows using grid-template-rows property
04:52 How fraction unit (fr) works
06:43 How to specify columns using grid-template-areas
08:47 How to change grid column size using grid-template-columns property
09:33 How to specify space between rows and columns using grid-gap property
10:14 How to create empty cells in CSS Grid using grid-template-areas property
11:28 Quick recap
🔥 Course Mastering Prettier & Stylelint: https://masteringlinting.com/
🏷 Use coupon YOUTUBE15 to get an additional 15% off on the Masterclass package.
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: Twitter: CSSWeekly
👉 Instagram: Instagram: cssweekly
👉 Facebook: Facebook: CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: Twitter: zoranjambor
👉 LinkedIn: LinkedIn: zoranjambor
- Zoran Jambor
#css #cssgrid
🎨 Codepen demo: https://codepen.io/ZoranJambor/pen/Po...
📖 Timestamps
00:00 Intro
00:36 How grid-template-areas property works
03:49 How to adjust the size of grid rows using grid-template-rows property
04:52 How fraction unit (fr) works
06:43 How to specify columns using grid-template-areas
08:47 How to change grid column size using grid-template-columns property
09:33 How to specify space between rows and columns using grid-gap property
10:14 How to create empty cells in CSS Grid using grid-template-areas property
11:28 Quick recap
🔥 Course Mastering Prettier & Stylelint: https://masteringlinting.com/
🏷 Use coupon YOUTUBE15 to get an additional 15% off on the Masterclass package.
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: Twitter: CSSWeekly
👉 Instagram: Instagram: cssweekly
👉 Facebook: Facebook: CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: Twitter: zoranjambor
👉 LinkedIn: LinkedIn: zoranjambor
- Zoran Jambor
#css #cssgrid
2 سال پیش
در تاریخ 1401/08/26 منتشر شده
است.
2,692
بـار بازدید شده