YT YouTube2Text

YouTube2Text → Transcripts → CSS Grid Course - The Only Grid Tutorial You'll Ever Need!

CSS Grid Course - The Only Grid Tutorial You'll Ever Need! — Transcript

by Coding2GO · 4,512 words · 641 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Have you ever struggled with CSS grid or
0:02the perfect solution you found online
0:03just seemed impossible to understand?
0:05Well, today that is going to change
0:07forever because in this video you will
0:09learn everything about CSS grid in only
0:1120 minutes.
0:13[music]
0:15When I first learned about grid, it
0:17seemed very complicated, but now I'm
0:18using it all the time to build modern
0:20and responsive layouts that look great
0:22on any device. No matter if I'm building
0:24an online shop or a creative portfolio,
0:26it always comes down to CSS grid. And in
0:28this video, I will explain all of it
0:29starting from the absolute basics all
0:31the way to advanced real world examples.
0:33So after watching this course, you will
0:35have the confidence to build any layout
0:36you can imagine. It all starts in HTML
0:39because for any type of layout, you will
0:40be working with a parent element that
0:42contains a few child elements. These
0:43make up your grid. We usually call the
0:46parent element grid container and all
0:48the child elements grid items. That is
0:50really all you need in HTML to start
0:52working with grid. In CSS, you start by
0:54addressing the grid container where you
0:56declare display grid. A grid needs
0:59columns and rows. If you don't declare
1:01the size or the number of columns and
1:02rows, the browser will just do it
1:04automatically. In this case, we have
1:05just one column and nine rows. But we
1:08can also change that by declaring how
1:10many columns and rows our grid should
1:11have. For the columns, you use the
1:13property grid template columns. Here,
1:15every value represents one column. For
1:18example, I write 200 pixels three times.
1:20That way I end up with three columns
1:22each being 200 pixels wide. Pretty
1:24simple. To see the grid layout better,
1:26we can go to the developer tools in the
1:28browser and click on this little icon
1:30over here. This is a Firefox feature
1:32that will show us the columns and rows
1:33with purple lines. That way it is easier
1:35to see what's going on. A lot of times
1:37you don't need to specify the rows of a
1:39grid as this adjusts automatically to
1:41the columns you specified. But if you
1:43want to, you can use grid template rows
1:46to do the same thing for the rows. Let's
1:48say 200 pixels three times again. Now we
1:51have this tic-tac-toe kind of layout.
1:53Another cool property you can use is the
1:54gap property. This one will create a gap
1:57between the columns and rows. So as you
1:59can see the grid template columns
2:00property determines not only how many
2:02columns the grid should have but also
2:04how big each individual column should
2:06be. That means we can easily change the
2:08size of one column by modifying these
2:10values. For example, 400 pixels. Then
2:13this column is a lot bigger than the
2:14others. And when you set up any grid
2:17layout, even a complicated one,
2:18adjusting the number and size of the
2:20columns is really all you need to do.
2:21But it's not always that easy because
2:23often times when we design a grid
2:25layout, these layouts can get very large
2:26and they will only fit properly on a
2:28desktop screen. And this is of course
2:30not very responsive. Which is why it is
2:32super important that you sketch out
2:34different versions of the same grid for
2:35all the different screen sizes. And a
2:37cool thing about grid is that it offers
2:38many tools that make everything
2:40responsive using only a few lines of
2:42code. But before I explain how to do
2:44that, let's quickly talk about this
2:45amazing tool I'm using right now. Miro
2:47is a great innovation workspace where
2:49you can brainstorm ideas with your team
2:51using a massive collection of templates
2:53which allow you to do basically anything
2:54you would need as a developer. That
2:56includes designing prototypes, planning
2:58processes using all sorts of diagrams
3:00that you might know from your computer
3:01science studies and collaborating with
3:03your team members. But there's more.
3:05What I personally love is how Miro
3:06brings all your tools together into a
3:08single workspace. That means you can
3:10import YouTube videos, Excel or Google
3:11Sheets, or even an entire AWS
3:14infrastructure. And if you ever work
3:15with someone that doesn't know anything
3:17about tech, like a client, investor, or
3:19business partner, then Miro is
3:21definitely the best option to visualize
3:23your idea and explain how your software
3:25works. That way, everyone can understand
3:27the process, no matter their background.
3:28There's so much more Miro can do, so I
3:30highly recommend that you try it out
3:32yourself by clicking the first link in
3:33the video description. Let's talk about
3:36how to improve the responsiveness of
3:37your grid. When setting up the columns
3:39and rows of your layout, you don't have
3:41to use these fixed pixel values. You
3:43could also make it a bit more responsive
3:45by using a unit called fraction. For
3:48example, if I want the grid to fill out
3:49the entire width of the website, and
3:52each column should have the same size.
3:54Then we apply 1 fr 1 fr 1f fr. Each
3:57column is one fraction wide. You can see
4:00how the grid stretches over the entire
4:01screen horizontally. And if I resize the
4:04window, the grid will resize
4:05automatically. So what do you think will
4:07happen if I also use fractions for the
4:09rows? So I say 1 fr 1f fr 1f fr on grid
4:13template rows. Here it is important to
4:15know that it will not cover the entire
4:16screen. Because fractions behave
4:18relative to the grid container, not to
4:20the window. So only when I assign a
4:23height to it, we can see the effect. A
4:25cool thing about fractions is that you
4:27can also use them relative to one
4:28another. So this column over here could
4:31also be two fractions wide. Then it will
4:33be two times the size of the others. And
4:35you can also mix different units within
4:37a grid. For example, let's say our
4:39website only has two elements, a sidebar
4:42and a main content. I will comment out
4:44the other elements for now. Then you
4:46could create a grid with only two
4:47columns using a fixed pixel value for
4:49the sidebar and one fraction for the
4:51main content. So the sidebar will always
4:54stay in place and keep its fixed size.
4:56But the main content will be flexible
4:58and responsive depending on the screen
5:00size. So fractions behave very similar
5:02to flex grow and flex rank that you
5:04might know from flexbox. Now let's get
5:05back to our previous example and learn
5:07more about alignment. Alignment can get
5:09a bit confusing if you don't listen
5:11closely to what comes next. Because in
5:13grid we have the alignment of the
5:14columns and rows, but we also have the
5:16alignment of each item in the cells. To
5:19show you this better, I made all columns
5:21and rows 300 pixels big, but I also
5:23assigned a height and width of 100
5:25pixels to the items. So now the items
5:28have a different size than their grid
5:29cell. You can see that if you take a
5:31look at the purple lines in Firefox. Now
5:33to handle the alignment within the
5:35cells, you can use justify items and
5:37align items. Here you have the values
5:39start, end, and center. Justify items
5:42handles the horizontal alignment, and
5:44align items handles the vertical
5:46alignment. If you set both to center,
5:48they will be centered perfectly. But
5:50then we also have justify content and
5:52align content. These are different
5:54properties. Let's see what they do.
5:56Justify content handles the alignment of
5:58the columns. So if I set this to center,
6:01it will center the grid horizontally
6:02within the grid container. Align content
6:05handles the alignment of the rows. If I
6:07set this one to center, it will center
6:08the grid vertically. But again, don't
6:10confuse the grid container with the
6:12viewport. If I change the size of the
6:14grid container, that will affect these
6:15properties too. The grid is only
6:17centered within the grid container, not
6:19on the entire website. All right, now
6:21you know the basics of creating columns
6:23and rows and how to align everything to
6:24your liking. But now it's time to
6:26explore a concept called implicit grids.
6:28So far, we have created a fixed amount
6:30of columns and rows because we knew how
6:32many columns and rows we needed. But
6:34what if you don't know the number of
6:35elements that make up your grid? What if
6:37you get your content from a database
6:39like in a search function for example?
6:41Then the number of search results can be
6:43different every time. How can you make a
6:45grid for that? Let's get back to our
6:47previous example and learn more about
6:48implicit grids in HTML. We can see how
6:51we have nine boxes. Let's see what
6:53happens if I add more elements. Then
6:55these two boxes will be down here. They
6:57are very small and the layout is
6:59inconsistent. To fix that, we need to
7:01prepare our grid by managing its
7:02automatic behavior. What should the grid
7:04do automatically? For that, we use the
7:06grid auto rows property. Grid auto rows
7:09controls the size of every automatically
7:11generated row like this one down here.
7:13We only accounted for three rows, but we
7:16need four rows to handle our unexpected
7:17elements. Here I would just apply the
7:19same value 300 pixels again. And now it
7:22looks very consistent again. And by the
7:24way, this property is actually the
7:25reason why I don't use grid template
7:27rows that much. We can completely remove
7:29it and just use grid auto rows to have
7:31the same layout. Now every row is
7:33automatic and only the columns are
7:35specified. Now in grid layouts, new
7:37elements are normally added in a new
7:39row. This has to do with the grid
7:40autoflow property. Its default value is
7:43row. But if you set this property to
7:45column, then every new element will be
7:47added in a new column. In that case, you
7:49would remove the grid template columns
7:51and use grid auto columns instead. Here
7:53I used 300 pixels again to have
7:55automated columns each being 300 pixels
7:58wide. And of course, if you have too
7:59many elements, this will result in
8:01overflowing elements. But still, I think
8:03you should know about this concept
8:04because you can use that if you want to
8:06create a website with horizontal
8:07scrolling like in a Netflix letter for
8:09example. Now after understanding the
8:11basic grid properties, it is time to
8:13learn something more complicated.
8:15Something that is very unique in CSS
8:16grid because technically everything we
8:18have covered so far can be achieved with
8:20flexbox as well. It just works a bit
8:22better with these responsive grid
8:23settings. But there's also a concept we
8:26call bento grids. These are grids where
8:28elements stretch across multiple columns
8:29or rows. They look like Japanese food
8:31boxes, which is where the name bento
8:33comes from. This is nearly impossible to
8:35achieve with flexbox, but it's very
8:37simple in CSS grid and it can lead to
8:39very awesome layouts. Here's how it
8:40works. Let's say we wanted to create
8:42this layout. Then you can probably see
8:44how we need a CSS grid for this. We use
8:46grid template columns and grid template
8:48rows to create four columns and two
8:50rows. For simplicity, they are all 200
8:52pixels big, but you could also use a
8:55more responsive unit like fractions, for
8:56example. I also use a gap of 1m to see
8:59the individual boxes better. Right now
9:01they are all displayed next to each
9:03other but we can define their exact
9:04position in the grid if we name them
9:06somehow. Each box needs a name so that
9:09we can identify it later. For that we
9:11use the grid area property. You can do
9:13this in CSS but then you would have to
9:15address every box individually. So to
9:17save a few lines of code you could also
9:19do this in HTML using the style
9:21attribute. This is usually done much
9:23faster and since I don't plan on
9:24overwriting these values we don't have
9:26to worry about specificity. The names
9:28for the grid area is just box one, box
9:30two, box three, and so on. Now that
9:33every box has a name for its grid area,
9:35we can now decide how big these grid
9:37areas should be. In other words, across
9:39how many columns or rows they should
9:40stretch. And for that, we use the
9:42property grid template areas. And this
9:45is really where all the magic happens.
9:47On that property, we can define strings.
9:49One string is one row in the grid.
9:52Remember this grid design over here is
9:53the goal. So in the first row we need
9:56box one, box two, box two again, and box
10:00three. Now we write another string. I'm
10:03going to do this in a new line, but we
10:04could also write everything in one line
10:05of code. In the second row of the grid,
10:07we need box one again, box 4, box 5, and
10:12box 5 again. And in the browser, that
10:14should already give us the first grid of
10:16the video. So for a beginner that might
10:18be a bit tricky to see, but the grid
10:19template areas property contains the
10:21information where exactly each box
10:23should go. Maybe you'll see it with a
10:25bit of video editing. Every string is
10:28one row and the spaces inside the
10:30strings separate the columns and every
10:32box has a grid area which serves as
10:33their identifier. The cool thing about
10:35this property is that we can now change
10:37the layout very easily by just changing
10:39these strings. For example, I can make
10:42box one very big by putting it here and
10:44here and make all the other boxes a bit
10:46smaller over here. And this will now
10:48give me a completely different layout by
10:50just changing one tiny thing. And you
10:53can probably see how powerful this can
10:54be when thinking about responsive web
10:56design. For a smaller display, we just
10:58have to come up with a design that is a
11:00bit thinner. That means we have to
11:02rearrange the grid areas so that all the
11:04boxes fit properly. Inside a media
11:06query, I changed the values for the grid
11:08template columns and grid template rows.
11:10We could use a 3x3 grid for example.
11:12Later I will show you how to make this
11:14completely automatic. And now in grid
11:16template areas I create a design that
11:18looks somewhat like this. We just
11:20rearranging the five grid areas for the
11:22five boxes so that we have a 3x3 layout.
11:25This is now a bit thinner and perfectly
11:27suited for tablet devices. And of course
11:30the same thing goes for mobile screens.
11:31I can do the same thing again but this
11:33time with only two columns and four
11:35rows. So depending on the screen size,
11:37we can always change the grid template
11:39areas property to create a grid layout
11:41that fits properly. But you might have
11:43noticed one annoying thing. We always
11:45need to change grid template columns and
11:47grid template rows. But I found a way
11:49where we don't need to change these
11:51properties. There's a solution where you
11:53only adjust the grid areas and the
11:54columns and rows will follow
11:56automatically because technically that
11:58information is already contained in grid
12:00template areas. So I will remove grid
12:02template columns and grid template rows
12:04everywhere and only at the beginning up
12:06here in my grid container. I will use
12:08different properties called grid autoc
12:10columns and grid auto rows. These
12:13properties will now create an implicit
12:15grid. That means here we define how big
12:17an automatically created column or row
12:19should be. They're all 200 pixels. By
12:22using these properties, we don't need to
12:23specify the columns and rows anymore
12:25since they will be created
12:26automatically. I'm not saying that this
12:28is the better way. If you really want to
12:30be 100% sure and you want more control
12:32over the individual columns and rows,
12:34then you will be better off with grid
12:35template columns and grid template rows
12:37in the media query. But if you prefer a
12:38shorter and more automatic way, then do
12:40it like this with an implicit grid. Now,
12:42there are a few things to consider going
12:44forward. Right now, I'm using a fixed
12:46unit. You could also use the unit em
12:48which is a bit better, but with both of
12:50these units, you're limiting the size of
12:51the boxes. If that is the goal, then
12:53that's of course okay. This could be
12:55useful for an image gallery, for
12:56example. But the moment you start
12:58filling these boxes with content, then
13:00things can get messy if you limit the
13:02size. This is why we have to make a
13:03decision. Do you want to hide
13:05overflowing content with overflow hidden
13:07and make sure the grid stays in place
13:08perfectly or do you want to have an
13:10adaptive grid that resizes itself based
13:12on the text content? For that, you can
13:14use the value auto or one fraction for
13:17the automatic rows. But what is the
13:19difference? The value auto is dependent
13:21on the text content. Here, if there's no
13:23content or padding, then there's no row.
13:26If there's more text content, the height
13:28of the row will adjust automatically.
13:30But I think this will make it really
13:31difficult to balance the layout because
13:33now the content has to be balanced
13:35perfectly to make this grid look good.
13:37The other option for an adaptive grid is
13:39the value one fraction. If you use one
13:41fraction, then all the rows, they're all
13:44the same size. And for me, that works a
13:45lot better. That means if I start
13:47filling the first row with a bit of
13:49content and it grows bigger, then the
13:51other rows will also grow accordingly.
13:53But just a general recommendation here,
13:55don't fill these bento grids with too
13:57much text. I believe these grids work
13:58way better with images and cool graphs
14:01because most of the time the goal is to
14:02make a product look awesome and not to
14:04present a big amount of information.
14:06Now, before we move on to my favorite
14:07way of using grid layouts, where we
14:09create a responsive layout for an online
14:11shop. Let's talk about a topic that
14:13shows how you can use grid in a
14:15completely unexpected but powerful way.
14:17Because so far, we've only used grid to
14:19create responsive layouts. But grid is
14:21actually more powerful than that because
14:23we can use the same properties to solve
14:25completely different problems too. For
14:27example, if you want to stack certain
14:28elements, like when you want to place
14:30text on top of an image or put a video
14:33behind a website section, then you would
14:35use a concept called grid stacking. It
14:37is entirely possible with the grid
14:39properties you already know. You just
14:40have to get a bit creative. Here's how
14:42it works. When you have a grid layout
14:44defined, you can target the child
14:45elements and use the properties grid row
14:48and grid column. These properties
14:50control how many columns or rows an
14:52element should span. For example, if I
14:53set grid column to 1/3, the element
14:57stretches across two columns because
14:59grid lines are count as 1 2 3. Now, why
15:02am I telling you this? Because we can
15:04use this exact concept to make chart
15:06elements overlap. Let's assign the same
15:08cell in the middle to our second chart
15:10by making it stretch from line two to
15:12line four. By default, that will push it
15:15into another row. So we also have to set
15:17the same grid row 1/2 and do that for
15:21both chart elements. Now you can see how
15:23they overlap. It is even clearer if I
15:25lower the opacity on one of them. So
15:27when two elements share the same grid
15:29cell, we essentially get the same
15:30behavior we want from absolute
15:32positioning. overlapping elements that
15:34are positioned relative to their parent.
15:36A common example for this would be to
15:38place text on top of an image. With
15:40absolute positioning, you would have a
15:41wrapper with position relative and a
15:43text container with position absolute
15:45and then use the top left, bottom right
15:47values to position it exactly where you
15:48want it. This works totally fine. But
15:51here's the same thing with grid
15:52stacking. Remove all of this and instead
15:54set the wrapper to display grid. This
15:57will automatically create a one by one
15:59grid without defining rows or columns.
16:01We don't need them. Now on the text
16:02container, set both grid column and grid
16:04row to start at line one and end at line
16:07two. meaning it covers the entire grid
16:09since this is only one cell. On the
16:12image, we do exactly the same grid row
16:14and grid column one two and that will
16:17make them overlap perfectly just like
16:19with absolute positioning but with the
16:21advantage that we now have access to all
16:23those fancy grid properties. For
16:25example, we can use place items to align
16:27the elements at the start, at the end,
16:29or even in the center without having to
16:31calculate top 50% and translating it
16:34back as you would have to do it in
16:35position absolute. Right now, we're
16:37stacking the CSS grid using grid row and
16:39grid column. But the cool thing is
16:41there's actually a shorter and more
16:43readable way which I prefer. Let's use
16:45that in the next example. Imagine you
16:46want to play a large video in the
16:48background of your header section.
16:49Here's my video element which has all
16:51the important attributes we need to make
16:53it play in the background. With absolute
16:55positioning, you would often have to set
16:56either the video or the text content to
16:58position absolute. That will work fine,
17:01but if the content size changes
17:02dynamically, you could run into some
17:04ugly overflow issues. But with grid
17:06stacking, you don't have to worry about
17:08that. Let's remove the absolute
17:09positioning and set the header to
17:11display grid. This time I will use grid
17:14template areas. I simply define one area
17:17and call it stack. Now on both the video
17:20and the text container, I assign that
17:22grid area stack. It is very readable and
17:25you can see how both elements stack in
17:27the browser. Now to control which
17:29element is on top, I just use the Z
17:31index property. The higher the value,
17:33the closer the element is to the viewer.
17:35And again, we can center everything with
17:37place items center. Very intuitive. All
17:40right. So far, you should already have a
17:42good understanding about the properties
17:43we have in CSS grid. But the most
17:45important grid concept is still missing.
17:48The one concept that is used in most
17:50real life applications. A concept I call
17:52grid wrapping, where the grid is able to
17:54adjust the amount of columns that fit on
17:56the screen at once. If there's not
17:57enough space, it will simply eliminate a
17:59column and put the items into the
18:01remaining columns. It is doing all of
18:03this automatically, responsively,
18:04without any media queries. And to learn
18:06about this concept more practically,
18:08let's implement it into this basic
18:10online shop layout. We want to create a
18:12wrapping grid that shows these products
18:14in a responsive way. Depending on the
18:16screen size, the grid will automatically
18:18add or remove columns so that the
18:20website looks great on any device. Let's
18:22take a look at what we have got so far.
18:24We have a basic website with a products
18:26list. These products are simple div
18:28containers with an image, a name, and a
18:30price. That's it. They have very basic
18:32starts. Display flex and flex direction
18:34column to have a vertical layout within
18:36the containers. The image has a height
18:38auto applied so that the height can
18:40resize properly if we change the size of
18:42the image using grid which we will do.
18:44So let's take a look at the grid layout
18:46in the product list. We have of course
18:48display grid. The columns are pretty
18:50basic just three columns each 300 pixels
18:53in the browser. That means this grid is
18:55not responsive. If I resize the window
18:58these columns will overflow. To
19:00calculate how many columns can fit
19:02automatically, we have to use a function
19:04called repeat. This function is pretty
19:06powerful. It takes two arguments. The
19:08first one determines how many times you
19:10want to repeat and the second one what
19:12value you want to repeat. For example, I
19:15can say repeat three times 300 pixels.
19:18Then that would be exactly the same as
19:20before just using the repeat function.
19:22If I say repeat four times, it will
19:24create four columns of 300 pixels. So
19:27far pretty simple. But we don't have to
19:29use a fixed number value here. We can
19:31also use the keyword auto fit. Then it
19:34will check automatically how many times
19:36we can repeat the value 300 pixels
19:38depending on how much space there is. So
19:40if I resize the browser window, you can
19:42already see how it will create and
19:44delete columns depending on the screen
19:45size. Pretty simple and yet very
19:48responsive. But we can also make it even
19:50more responsive by introducing fractions
19:52into this layout. You see, sometimes we
19:54have a screen size where there's not
19:56enough space for another column. But we
19:58do have some wide space that we could
19:59fill out. So at this screen size, we
20:01could make the remaining columns
20:03slightly bigger until we have enough
20:05space to create another column. For
20:06that, we have to adjust the second
20:08parameter. Here we provide a size range
20:11instead using the minmax function. The
20:13minimum value should be 300 pixels, but
20:16the max value should be one fraction. So
20:19essentially we're telling the browser
20:21try to auto fit as many columns next to
20:23each other as possible and each column
20:25should be between 300 pixels and one
20:27fraction wide. That way there is no wide
20:30space and we end up with a responsively
20:32wrapping grid where the columns can
20:34resize if needed. Pretty awesome. And
20:36with that you have just completed an
20:38entire deep dive into CSS grid. But this
20:41is only the beginning. If you're ready
20:43to move beyond layout and actually start
20:45building interactive websites, then it's
20:47time to learn JavaScript. I've created a
20:49full 8 hours JavaScript course, beginner
20:51friendly but fast-paced, so you can see
20:53results quickly by building hands-on
20:55projects. You will learn everything
20:57about programming in JavaScript, which
20:59will open the doors to all those
21:00libraries and frameworks that you plan
21:01to learn. So, if you want to learn React
21:03in the future or Angular or Vue.js, then
21:06you will have to learn JavaScript first.
21:08You can get my course on Udemy using the
21:10link in the video description. My name
21:12is Fabian and this was coding to go.

About this transcript

This page contains the full transcript of CSS Grid Course - The Only Grid Tutorial You'll Ever Need! by Coding2GO, generated from the public captions YouTube serves with the video. The transcript has 4,512 words across 641 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.