Step: 9 CSS Grid Tutorial for Webpage Layout

CSS Grid allow content to be arranged on a webpage in a 2 dimensional grid rather than the single dimension flex-box axis. This video goes over the basics of CSS grid to get you started laying out webpages. It also shows a responsive gallery example that works on desktops and mobile devices without any media queries.

0:00 - Introduction
0:16 - Setup Visual Studio Code Workspace
0:48 - Grid HTML
1:31 - styles.css
2:06 - default CSS styles
3:03 - style grid items
3:55 - Grid vs Flexbox
4:26 - Setup Grid Columns
7:15 - Setup Grid Rows
9:43 - Grid item positioning
12:18 - Grid Gap
12:30 - Align and Justify Items
14:05 - Make Image Gallery
17:10 - Responsive Grid Gallery with minmax
18:30 - Object-fit cover
20:25 - Initialize Repository
20:35 - Publish to GitHub

Playlist: Build Website | No Cost | Free

1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap - https://youtu.be/noaBqkkyORU

2 - Enforce HTTPS with GitHub Pages and Namecheap - https://youtu.be/rxuY84mfdag

3 - Setup Visual Studio Code with GitHub Integration - https://youtu.be/431N-tZRBl8

4 - Basic HTML Crash Course and Page Structure - https://youtu.be/_WopKYVWp44

5 - Basic CSS Crash Course - https://youtu.be/fvXuYepwLjg

6 - CSS Flexbox - https://youtu.be/AE0jmGiw-nw

7 - CSS Grid - https://youtu.be/uIf5BH3MtWM

8 - Sample Portfolio layouts in HTML and CSS (in production)

9 - Example Portfolio Site from Start to Finish (in production)

Follow me on instagram:

https://www.instagram.com/yesbhautik
https://www.instagram.com/deepsantani2001


For follow more: http://bit.ly/yesbhautik


Please Don't forget to SUBSCRIBE Unique Tech for more Trusted & Awesome videos.

Tags:
#UniqueTech