Web design

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

Artist Portfolio Website Video Series
1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap –

2 – Enforce HTTPS with GitHub Pages and Namecheap –

3 – Setup Visual Studio Code with GitHub Integration –

4 – Basic HTML Crash Course and Page Structure –

5 – Basic CSS Crash Course –

6 – CSS Flexbox –

7 – CSS Grid –

8 – Portfolio Gallery in CSS Grid with Lightbox –

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

Looking for What Make Art merch?

Other links for your browsing.

What Make Art? on Twitter:

What Make Art? on Instagram:

You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

You may also like

Leave a reply

More in:Web design