title
CSS Grid Course

description
CSS Grid makes it easier to create website layouts. It simplifies both your HTML and CSS, while giving you more control over your layout. You can take the interactive version of this CSS grid tutorial here: https://scrimba.com/g/gR8PTE The course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts. ⭐️Full content overview⭐️ ⌨️ 0:01 1. Course Introduction ⌨️ 4:47 2. Your first grid ⌨️ 8:03 3. Fraction units and repeat ⌨️ 11:45 4. Positioning items ⌨️ 18:28 5. Template areas ⌨️ 23:18 6. Auto-fit and minmax ⌨️ 27:07 7. Implicit rows ⌨️ 29:06 8. An awesome image grid ⌨️ 35:56 9. Bonus: Named Lines ⌨️ 41:25 10. Bonus: Justify-content and align-content ⌨️ 44:17 11. Bonus: Justify-items and align-items ⌨️ 47:44 12. Bonus: Auto-fit vs. auto-fill ⌨️ 49:39 13. Bonus: Creating an article layout ⌨️ 57:37 14. Bonus: Grid vs. Flexbox You can connect with the course creator Per Harald Borgen via Twitter: https://twitter.com/perborgen -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'CSS Grid Course', 'heatmap': [{'end': 869.352, 'start': 749.878, 'weight': 0.774}, {'end': 1581.248, 'start': 1427.602, 'weight': 0.723}], 'summary': 'A free course on the css grid layout module emphasizes its flexibility, intuitive learning process, and interactive nature. it covers creating two-dimensional layouts, defining rows and columns, responsive grid, advanced concepts, image grid, source order independence, alignment, justification, grid fundamentals, and a comparison with flexbox.', 'chapters': [{'end': 49.5, 'segs': [{'end': 49.5, 'src': 'embed', 'start': 4.704, 'weight': 0, 'content': [{'end': 8.89, 'text': 'Hey, and welcome to this free course on the CSS grid layout module.', 'start': 4.704, 'duration': 4.186}, {'end': 12.935, 'text': 'CSS grid is actually a whole new way of creating website layouts.', 'start': 9.13, 'duration': 3.805}, {'end': 17.641, 'text': "It'll give you more flexibility than any other layout system or framework.", 'start': 13.556, 'duration': 4.085}, {'end': 19.404, 'text': "And it's also pretty intuitive to learn.", 'start': 17.882, 'duration': 1.522}, {'end': 26.151, 'text': 'Before we jump into the course, I want to point out that what you see in front of you now is not a normal video.', 'start': 20.225, 'duration': 5.926}, {'end': 28.513, 'text': "it's an interactive scrimball screencast.", 'start': 26.151, 'duration': 2.362}, {'end': 34.959, 'text': 'And that means that you as the viewer, at any given time, can jump into the code and change it.', 'start': 28.753, 'duration': 6.206}, {'end': 44.296, 'text': "You can, for example, head over to the index.css and change the color value for the h1 tag to, let's say, black.", 'start': 35.95, 'duration': 8.346}, {'end': 49.5, 'text': 'Then see how your changes affected the output in the simulator window here.', 'start': 45.037, 'duration': 4.463}], 'summary': 'Free course on css grid layout, offers more flexibility and interactivity for learners.', 'duration': 44.796, 'max_score': 4.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac4704.jpg'}], 'start': 4.704, 'title': 'Css grid layout module', 'summary': 'Introduces a free course on the css grid layout module, highlighting its flexibility and intuitive learning process, and emphasizes the unique interactive nature of the screencast.', 'chapters': [{'end': 49.5, 'start': 4.704, 'title': 'Css grid layout module', 'summary': 'Introduces a free course on the css grid layout module, highlighting its flexibility and intuitive learning process, and emphasizes the unique interactive nature of the screencast.', 'duration': 44.796, 'highlights': ['The CSS grid layout module provides more flexibility than any other layout system or framework.', 'The interactive scrimball screencast allows viewers to jump into the code and make real-time changes.', 'It emphasizes the intuitive learning process of the CSS grid layout module.']}], 'duration': 44.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac4704.jpg', 'highlights': ['The CSS grid layout module provides more flexibility than any other layout system or framework.', 'The interactive scrimball screencast allows viewers to jump into the code and make real-time changes.', 'It emphasizes the intuitive learning process of the CSS grid layout module.']}, {'end': 483.02, 'segs': [{'end': 78.042, 'src': 'embed', 'start': 49.84, 'weight': 1, 'content': [{'end': 54.444, 'text': 'So feel free to do this whenever you feel the need for experimenting with the code,', 'start': 49.84, 'duration': 4.604}, {'end': 57.386, 'text': "so that you make sure that you properly understand what we're going through.", 'start': 54.444, 'duration': 2.942}, {'end': 65.296, 'text': 'Okay, so why do you want to learn about CSS Grid??', 'start': 62.955, 'duration': 2.341}, {'end': 71.719, 'text': 'Well, first of all, because it makes your life a whole lot easier when it comes to creating two-dimensional layouts,', 'start': 66.036, 'duration': 5.683}, {'end': 74.02, 'text': 'which basically almost all websites consist of.', 'start': 71.719, 'duration': 2.301}, {'end': 78.042, 'text': "Secondly, as you'll see, it'll make your markup significantly simpler.", 'start': 74.46, 'duration': 3.582}], 'summary': 'Learning css grid makes creating layouts easier and simplifies markup.', 'duration': 28.202, 'max_score': 49.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac49840.jpg'}, {'end': 118.304, 'src': 'embed', 'start': 90.18, 'weight': 0, 'content': [{'end': 97.325, 'text': 'And finally, CSS grid is now supported by all the major browsers, and the support amongst global website traffic is climbing quickly.', 'start': 90.18, 'duration': 7.145}, {'end': 104.35, 'text': "To learn exactly how many percent at the time you're watching this screencast, check out this URL here.", 'start': 97.986, 'duration': 6.364}, {'end': 111.902, 'text': "Now let's kick off the course by looking at the benefits CSS grid has over a framework like bootstrap.", 'start': 105.461, 'duration': 6.441}, {'end': 118.304, 'text': 'Here, we have created two mockups for a website.', 'start': 115.763, 'duration': 2.541}], 'summary': 'Css grid is supported by all major browsers, with increasing global website traffic adoption. benefits over bootstrap will be explored.', 'duration': 28.124, 'max_score': 90.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac90180.jpg'}, {'end': 176.847, 'src': 'embed', 'start': 147.904, 'weight': 3, 'content': [{'end': 153.529, 'text': 'because gone are all the unnecessary row items and the ugly class names.', 'start': 147.904, 'duration': 5.625}, {'end': 159.514, 'text': 'So, as I mentioned, CSS grid will make your markup cleaner benefit, which, of course,', 'start': 154.309, 'duration': 5.205}, {'end': 164.158, 'text': 'would become much more apparent if we were to turn these two examples into full blown websites.', 'start': 159.514, 'duration': 4.644}, {'end': 169.722, 'text': "However, this of course doesn't tell the whole story as the grid example of course needs CSS.", 'start': 164.818, 'duration': 4.904}, {'end': 176.847, 'text': 'which you can see here in the examples dot CSS, here is the CSS needed to create our grid example.', 'start': 170.603, 'duration': 6.244}], 'summary': 'Css grid eliminates unnecessary row items and class names, making markup cleaner and more efficient.', 'duration': 28.943, 'max_score': 147.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac147904.jpg'}, {'end': 321.452, 'src': 'embed', 'start': 292.619, 'weight': 5, 'content': [{'end': 298.141, 'text': "Hey, in this screencast, you're going to learn how to create grids through defining its rows and columns.", 'start': 292.619, 'duration': 5.522}, {'end': 301.042, 'text': 'A grid consists of two main elements.', 'start': 298.681, 'duration': 2.361}, {'end': 303.463, 'text': "There's the container, which we have here.", 'start': 301.402, 'duration': 2.061}, {'end': 311.646, 'text': "And then there's the items, which are the elements inside the container, in our case, six divs, which display the numbers from one to six.", 'start': 303.483, 'duration': 8.163}, {'end': 316.668, 'text': 'Now without any grid layout, this results in six divs stacked on top of each other.', 'start': 311.966, 'duration': 4.702}, {'end': 321.452, 'text': "I've also given them a little bit of styling, but that has nothing to do with the grid layout itself.", 'start': 317.009, 'duration': 4.443}], 'summary': 'Learn to create grids by defining rows and columns, with 6 divs displaying numbers 1 to 6.', 'duration': 28.833, 'max_score': 292.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac292619.jpg'}], 'start': 49.84, 'title': 'Css grid benefits and basics', 'summary': 'Highlights the advantages of css grid including creating two-dimensional layouts, simplifying markup, flexibility in layout changes, independence from frameworks like bootstrap, widespread browser support, and increasing global website traffic. it also covers the basics of css grid layout, defining rows and columns, creating a responsive grid, customizing grid gaps and dimensions, with a demonstration of creating different grid layouts and quantifiable data.', 'chapters': [{'end': 261.617, 'start': 49.84, 'title': 'Benefits of learning css grid', 'summary': 'Highlights the benefits of learning css grid, including its advantage in creating two-dimensional layouts, simplifying markup, providing flexibility in layout changes, and its independence from frameworks like bootstrap. additionally, it mentions the widespread browser support and increasing global website traffic using css grid.', 'duration': 211.777, 'highlights': ['CSS Grid enables easier creation of two-dimensional layouts', 'CSS Grid simplifies markup', 'CSS Grid provides flexibility in layout changes, especially in responsiveness', 'CSS Grid eliminates the need for frameworks like Bootstrap', 'Widespread browser support and increasing global website traffic using CSS Grid']}, {'end': 483.02, 'start': 262.197, 'title': 'Css grid layout basics', 'summary': 'Covers the basics of css grid layout, teaching how to define rows and columns, create a responsive grid, and customize grid gaps and dimensions, with a demonstration of creating different grid layouts with quantifiable data.', 'duration': 220.823, 'highlights': ['The chapter covers the basics of CSS grid layout, teaching how to define rows and columns, create a responsive grid, and customize grid gaps and dimensions.', 'A demonstration of creating different grid layouts with quantifiable data.']}], 'duration': 433.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac49840.jpg', 'highlights': ['Widespread browser support and increasing global website traffic using CSS Grid', 'CSS Grid enables easier creation of two-dimensional layouts', 'CSS Grid provides flexibility in layout changes, especially in responsiveness', 'CSS Grid simplifies markup', 'CSS Grid eliminates the need for frameworks like Bootstrap', 'The chapter covers the basics of CSS grid layout, teaching how to define rows and columns, create a responsive grid, and customize grid gaps and dimensions', 'A demonstration of creating different grid layouts with quantifiable data']}, {'end': 1377.127, 'segs': [{'end': 628.616, 'src': 'embed', 'start': 598.776, 'weight': 4, 'content': [{'end': 602.299, 'text': 'In this case, we can actually write this in a simpler way.', 'start': 598.776, 'duration': 3.523}, {'end': 607.185, 'text': 'we can do repeat times one fraction units.', 'start': 603.703, 'duration': 3.482}, {'end': 610.967, 'text': 'And as you can see, gives the exact same result.', 'start': 607.865, 'duration': 3.102}, {'end': 617.25, 'text': 'So the first parameter of the repeat function is the amount of rows or columns.', 'start': 611.687, 'duration': 5.563}, {'end': 622.853, 'text': 'And the second one is the value, just the height or the width of the rows or columns.', 'start': 618.03, 'duration': 4.823}, {'end': 628.616, 'text': "So let's say we want six columns instead, then we can simply change this number here to six instead.", 'start': 623.433, 'duration': 5.183}], 'summary': 'The repeat function can be used to specify the amount of rows or columns, for example, by changing the number to six.', 'duration': 29.84, 'max_score': 598.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac598776.jpg'}, {'end': 696.823, 'src': 'embed', 'start': 670.766, 'weight': 1, 'content': [{'end': 675.73, 'text': 'So grid template is the shorthand method for grid template columns and grid template rows.', 'start': 670.766, 'duration': 4.964}, {'end': 682.499, 'text': 'And it can be a bit hard to remember which one of rows or columns goes first and which one goes last.', 'start': 676.977, 'duration': 5.522}, {'end': 687.4, 'text': 'And the rule I use to remember this is to think of it as drawing an L.', 'start': 682.719, 'duration': 4.681}, {'end': 693.562, 'text': 'You start at the top and go downwards across the rows, and then you go to the right across the columns.', 'start': 687.4, 'duration': 6.162}, {'end': 696.823, 'text': 'Start with the rows, and then the columns.', 'start': 694.402, 'duration': 2.421}], 'summary': 'Grid template is a shorthand for grid template columns and rows, start with rows then columns.', 'duration': 26.057, 'max_score': 670.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac670766.jpg'}, {'end': 869.352, 'src': 'heatmap', 'start': 749.878, 'weight': 0.774, 'content': [{'end': 755.44, 'text': "For our website, though, we're going to need three rows, as we want the header to take up the top row,", 'start': 749.878, 'duration': 5.562}, {'end': 760.562, 'text': 'the menu and the content to be on the second row and the footer to be on the third row, all the way at the bottom.', 'start': 755.44, 'duration': 5.122}, {'end': 767.526, 'text': "So let's create a third row here, let's place in between the two existing rows and give it a height of 200 pixels.", 'start': 762.303, 'duration': 5.223}, {'end': 776.707, 'text': 'As you can see now, the header and the menu is on the top row and the content and the footer in the second row and our third row is blank,', 'start': 769.642, 'duration': 7.065}, {'end': 781.391, 'text': "as we haven't filled it with content yet, since our items only take up the first four grid cells.", 'start': 776.707, 'duration': 4.684}, {'end': 783.072, 'text': "So let's change that.", 'start': 782.031, 'duration': 1.041}, {'end': 790.097, 'text': "We'll start by targeting the header and making it span from the left hand side all the way over to the far right hand side.", 'start': 783.913, 'duration': 6.184}, {'end': 795.161, 'text': 'To achieve that, we need to head into the dot header and give it a grid column.', 'start': 790.838, 'duration': 4.323}, {'end': 801.348, 'text': 'start, set that to one, and also give it a grid column.', 'start': 796.764, 'duration': 4.584}, {'end': 809.676, 'text': 'And at three, as you can see, now the header spans across the entire first row.', 'start': 802.249, 'duration': 7.427}, {'end': 816.623, 'text': "And what we're saying here is that we want the header to start at the first column line and end at the third column line.", 'start': 810.377, 'duration': 6.246}, {'end': 822.376, 'text': 'And you might wonder why we have three column lines when we only have defined two columns.', 'start': 817.375, 'duration': 5.001}, {'end': 828.098, 'text': "Well, that's because the first column line goes from top to bottom on the left side of the grid.", 'start': 823.096, 'duration': 5.002}, {'end': 831.879, 'text': 'The second column line is the one that separates the two columns.', 'start': 828.678, 'duration': 3.201}, {'end': 836.56, 'text': 'And the third is the one that goes from top to bottom on the far right hand side of the grid.', 'start': 832.119, 'duration': 4.441}, {'end': 841.521, 'text': 'So when you have two columns, you have three column lines.', 'start': 837.42, 'duration': 4.101}, {'end': 843.842, 'text': 'And you can write that like this.', 'start': 842.261, 'duration': 1.581}, {'end': 848.34, 'text': 'Alternatively, though, we can also use the shorthand method, which I prefer.', 'start': 844.878, 'duration': 3.462}, {'end': 858.366, 'text': "Let's remove this line here, and also remove dash start rather do one forward slash three, as you can see, that gives the exact same result.", 'start': 849.12, 'duration': 9.246}, {'end': 861.647, 'text': "Let's also do the exact same thing with the footer.", 'start': 859.126, 'duration': 2.521}, {'end': 869.352, 'text': 'that Now the footer also spans across the entire width.', 'start': 865.629, 'duration': 3.723}], 'summary': 'Website layout with 3 rows: header, menu, content, footer. header and footer span entire width.', 'duration': 119.474, 'max_score': 749.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac749878.jpg'}, {'end': 790.097, 'src': 'embed', 'start': 762.303, 'weight': 7, 'content': [{'end': 767.526, 'text': "So let's create a third row here, let's place in between the two existing rows and give it a height of 200 pixels.", 'start': 762.303, 'duration': 5.223}, {'end': 776.707, 'text': 'As you can see now, the header and the menu is on the top row and the content and the footer in the second row and our third row is blank,', 'start': 769.642, 'duration': 7.065}, {'end': 781.391, 'text': "as we haven't filled it with content yet, since our items only take up the first four grid cells.", 'start': 776.707, 'duration': 4.684}, {'end': 783.072, 'text': "So let's change that.", 'start': 782.031, 'duration': 1.041}, {'end': 790.097, 'text': "We'll start by targeting the header and making it span from the left hand side all the way over to the far right hand side.", 'start': 783.913, 'duration': 6.184}], 'summary': 'Creating a third row with a height of 200 pixels, adjusting header to span from left to right.', 'duration': 27.794, 'max_score': 762.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac762303.jpg'}, {'end': 967.296, 'src': 'embed', 'start': 937.362, 'weight': 3, 'content': [{'end': 941.767, 'text': 'And we could do this without adding more columns by simply doing one fr.', 'start': 937.362, 'duration': 4.405}, {'end': 950.971, 'text': 'for a far for example, now you can see that the content takes up much more space, since the second column is four fraction units.', 'start': 943.408, 'duration': 7.563}, {'end': 953.512, 'text': 'And the first column is only one fraction unit.', 'start': 951.351, 'duration': 2.161}, {'end': 956.653, 'text': 'However, this is not a very flexible way of doing it.', 'start': 954.252, 'duration': 2.401}, {'end': 960.414, 'text': "Because now we're still stuck with two columns on a website layout.", 'start': 957.093, 'duration': 3.321}, {'end': 967.296, 'text': 'And you normally want a lot more columns than that in order to have the flexibility to shuffle around and change the content.', 'start': 960.634, 'duration': 6.662}], 'summary': 'Using a flexible way to add more columns without altering the layout is needed for website flexibility.', 'duration': 29.934, 'max_score': 937.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac937362.jpg'}, {'end': 1146.678, 'src': 'embed', 'start': 1099.473, 'weight': 0, 'content': [{'end': 1104.257, 'text': 'which gives you a lot of flexibility in terms of shuffling around on the content and experimenting.', 'start': 1099.473, 'duration': 4.784}, {'end': 1106.199, 'text': "So stay tuned, and I'll see you there.", 'start': 1104.618, 'duration': 1.581}, {'end': 1117.641, 'text': "Hey, in this screencast, you're going to learn a really cool feature of CSS Grid, called template areas,", 'start': 1111.357, 'duration': 6.284}, {'end': 1123.804, 'text': 'which allows you to change and experiment with layouts much more easily than with the techniques you learned in the previous cast.', 'start': 1117.641, 'duration': 6.163}, {'end': 1128.227, 'text': 'This feature is ideal for creating prototypes of layouts quickly.', 'start': 1124.485, 'duration': 3.742}, {'end': 1133.255, 'text': "We're using more or less the same example from the previous screencast.", 'start': 1129.514, 'duration': 3.741}, {'end': 1137.296, 'text': 'Our grid has 12 columns and three rows.', 'start': 1133.755, 'duration': 3.541}, {'end': 1140.917, 'text': 'The columns are just as they were in the previous screencast.', 'start': 1138.076, 'duration': 2.841}, {'end': 1146.678, 'text': "However, for the rows, I've changed the second one from 200 pixels to auto.", 'start': 1141.237, 'duration': 5.441}], 'summary': "Css grid's template areas feature allows easy layout experimentation with 12 columns and 3 rows, ideal for quick layout prototypes.", 'duration': 47.205, 'max_score': 1099.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1099473.jpg'}, {'end': 1356.425, 'src': 'embed', 'start': 1324.887, 'weight': 8, 'content': [{'end': 1332.35, 'text': 'And just as easy as that, we have changed layout without having to fiddle around with the values in the item classes.', 'start': 1324.887, 'duration': 7.463}, {'end': 1337.952, 'text': 'You can also use dots, which will result in blank cells like that.', 'start': 1332.85, 'duration': 5.102}, {'end': 1343.874, 'text': 'There, there and there.', 'start': 1339.993, 'duration': 3.881}, {'end': 1349.676, 'text': 'And now we have this weird experimental layout where all the corners are blank.', 'start': 1344.234, 'duration': 5.442}, {'end': 1356.425, 'text': 'Now, one thing you need to be aware of is that the areas will only be valid if they are rectangle.', 'start': 1350.799, 'duration': 5.626}], 'summary': 'Changed layout easily without adjusting item class values. dots create blank cells. experimental layout with blank corners. valid areas must be rectangles.', 'duration': 31.538, 'max_score': 1324.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1324887.jpg'}], 'start': 487.466, 'title': 'Css grid layout', 'summary': 'Covers css grid layout, including defining columns and rows using the fraction unit, adjusting grid items and sizes, and utilizing template areas for responsive and flexible grid designs. it also explains creating flexible layouts with 12 columns and easy layout experimentation.', 'chapters': [{'end': 693.562, 'start': 487.466, 'title': 'Css grid: defining columns and rows', 'summary': 'Demonstrates a more powerful way of defining columns and rows in css using the fraction unit, allowing for equal growth and shrinking of columns, and the shorthand method for defining grid template columns and rows, making it easier to manage layouts.', 'duration': 206.096, 'highlights': ['Using fraction units to define columns', 'Applying repeat function to simplify column definition', 'Utilizing shorthand method for defining grid template']}, {'end': 1080.073, 'start': 694.402, 'title': 'Adjusting grid items and sizes', 'summary': 'Explains how to adjust the position and size of items in a css grid, including creating rows and columns, spanning items across columns, and using the repeat function to create a more flexible layout with 12 columns.', 'duration': 385.671, 'highlights': ['Explanation of creating a 12 column layout using the repeat function and setting items to one fraction unit, providing more flexibility for layout changes.', 'Demonstration of spanning items across columns and changing the size of items by specifying grid columns and rows.', 'Explanation of creating three rows for a website layout and adjusting the position of items in the grid.']}, {'end': 1377.127, 'start': 1082.56, 'title': 'Css grid layout and template areas', 'summary': 'Introduces css grid template areas, allowing for easy layout experimentation with responsive and flexible grid designs, enabling quick prototyping with minimal code changes and super simple experimentation.', 'duration': 294.567, 'highlights': ['CSS Grid template areas allow for easy layout experimentation and prototyping', 'Responsive and flexible grid designs with auto-adjusting row heights', 'Changing layout without altering item classes']}], 'duration': 889.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac487466.jpg', 'highlights': ['Creating flexible layouts with 12 columns and easy layout experimentation', 'Utilizing shorthand method for defining grid template', 'Demonstration of spanning items across columns and changing the size of items by specifying grid columns and rows', 'Using fraction units to define columns', 'Applying repeat function to simplify column definition', 'CSS Grid template areas allow for easy layout experimentation and prototyping', 'Responsive and flexible grid designs with auto-adjusting row heights', 'Explanation of creating three rows for a website layout and adjusting the position of items in the grid', 'Changing layout without altering item classes']}, {'end': 1766.889, 'segs': [{'end': 1581.248, 'src': 'heatmap', 'start': 1377.587, 'weight': 0, 'content': [{'end': 1380.929, 'text': "And once you've done that, you have finished the first section of this course.", 'start': 1377.587, 'duration': 3.342}, {'end': 1382.21, 'text': 'So congratulations.', 'start': 1381.13, 'duration': 1.08}, {'end': 1384.652, 'text': 'You now know quite a lot about CSS Grid.', 'start': 1382.811, 'duration': 1.841}, {'end': 1387.394, 'text': "However, there's still a lot of stuff to learn.", 'start': 1385.113, 'duration': 2.281}, {'end': 1394.96, 'text': "So in the next section, I'm going to teach you some more advanced stuff, and we're going to create even more responsive grids.", 'start': 1387.594, 'duration': 7.366}, {'end': 1396.501, 'text': "That'll be super cool.", 'start': 1395.32, 'duration': 1.181}, {'end': 1398.062, 'text': "So I'll see you there.", 'start': 1396.941, 'duration': 1.121}, {'end': 1406.674, 'text': 'Hey, and welcome to the second section in this CSS grid course.', 'start': 1402.83, 'duration': 3.844}, {'end': 1410.037, 'text': "In it, you're going to learn more advanced concepts.", 'start': 1407.194, 'duration': 2.843}, {'end': 1412.359, 'text': "You've already learned about responsiveness.", 'start': 1410.537, 'duration': 1.822}, {'end': 1415.062, 'text': "But now we're going to take that to a new level.", 'start': 1412.72, 'duration': 2.342}, {'end': 1420.655, 'text': 'So here we have the setup for a grid, which you can see in the browser window as well.', 'start': 1416.311, 'duration': 4.344}, {'end': 1427.181, 'text': "It's got six columns and two rows, and that's defined here and should be pretty basic to you by now.", 'start': 1421.056, 'duration': 6.125}, {'end': 1432.206, 'text': 'Both the columns and rows have a value of 100 pixels in width and height.', 'start': 1427.602, 'duration': 4.604}, {'end': 1441.295, 'text': 'So this grid is not responsive now, as you can see, but we know from previous costs that we can turn it into responsive grid by doing one fr instead.', 'start': 1432.566, 'duration': 8.729}, {'end': 1445.382, 'text': 'now the columns will grow and shrink with the width of the container.', 'start': 1442.139, 'duration': 3.243}, {'end': 1452.927, 'text': "However, you wouldn't necessarily always want your columns to be six, like now they're very squeezed together.", 'start': 1445.882, 'duration': 7.045}, {'end': 1455.749, 'text': "And at this point they're suddenly very wide.", 'start': 1453.267, 'duration': 2.482}, {'end': 1458.011, 'text': 'what you perhaps rather want to do is, for example,', 'start': 1455.749, 'duration': 2.262}, {'end': 1465.056, 'text': "only have two in with when the example is being viewed on a mobile and six and with when it's viewed on a normal screen.", 'start': 1458.011, 'duration': 7.045}, {'end': 1470.481, 'text': "So let's make the amount of columns vary with the width of the container.", 'start': 1465.677, 'duration': 4.804}, {'end': 1473.803, 'text': "we'll first go back to having 100 pixels here instead.", 'start': 1471.161, 'duration': 2.642}, {'end': 1480.128, 'text': "And then rather than hard coding in six columns, we're going to use something called auto fit.", 'start': 1474.383, 'duration': 5.745}, {'end': 1485.251, 'text': "Now what will happen is that it'll vary the amount of columns with the width of the grid.", 'start': 1480.728, 'duration': 4.523}, {'end': 1490.255, 'text': 'As you can see, it simply tries to fit as many columns as possible into the container.', 'start': 1485.772, 'duration': 4.483}, {'end': 1495.899, 'text': "And when it gets 100 pixels extra space on the right hand side, it'll boom, add a new one.", 'start': 1490.555, 'duration': 5.344}, {'end': 1499.762, 'text': "So on a very narrow screen, it'll only show a couple of columns.", 'start': 1496.139, 'duration': 3.623}, {'end': 1508.951, 'text': "However, this doesn't give us the responsiveness we want, as the amount of 100 pixel columns rarely add up exactly to the width of the container.", 'start': 1500.282, 'duration': 8.669}, {'end': 1510.332, 'text': 'then we get a situation like this', 'start': 1508.951, 'duration': 1.381}, {'end': 1518.6, 'text': "here, where we have quite a lot of space left on the right hand side, though not enough to add a new column that doesn't look nice.", 'start': 1511.294, 'duration': 7.306}, {'end': 1524.104, 'text': 'Now, you might think that we could rather do auto fit one fr.', 'start': 1519.26, 'duration': 4.844}, {'end': 1527.086, 'text': 'However, that only give us one column,', 'start': 1524.124, 'duration': 2.962}, {'end': 1533.712, 'text': "because auto fit tries to fill up the grid with as many columns as possible until there's not enough space to add a new column.", 'start': 1527.086, 'duration': 6.626}, {'end': 1538.295, 'text': 'So when you use fraction unit, it starts by adding one column.', 'start': 1534.432, 'duration': 3.863}, {'end': 1541.318, 'text': 'However, then all the width is used up immediately.', 'start': 1538.575, 'duration': 2.743}, {'end': 1548.083, 'text': 'Because at that point, both the width of the entire container and the first column are set to one fraction unit.', 'start': 1541.758, 'duration': 6.325}, {'end': 1553.548, 'text': "So to get the behavior we want, we're going to use something called min max.", 'start': 1548.904, 'duration': 4.644}, {'end': 1556.73, 'text': "And we'll set our columns to be minimum 100 pixels.", 'start': 1554.388, 'duration': 2.342}, {'end': 1561.843, 'text': 'maximum one fraction unit.', 'start': 1560.242, 'duration': 1.601}, {'end': 1571.305, 'text': "Now you'll see that the columns will always fit the entire grid, regardless of whether or not the container exactly adds up to 100 pixels.", 'start': 1562.443, 'duration': 8.862}, {'end': 1575.407, 'text': 'So what happens here is that the columns will always be at least 100 pixels.', 'start': 1571.926, 'duration': 3.481}, {'end': 1581.248, 'text': "But if there's more available space, it'll simply distribute that equally across all the columns.", 'start': 1575.847, 'duration': 5.401}], 'summary': 'Css grid course covers responsive grids with 6 columns and 2 rows, teaching advanced concepts like auto fit and min max for better responsiveness.', 'duration': 67.795, 'max_score': 1377.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1377587.jpg'}, {'end': 1561.843, 'src': 'embed', 'start': 1534.432, 'weight': 2, 'content': [{'end': 1538.295, 'text': 'So when you use fraction unit, it starts by adding one column.', 'start': 1534.432, 'duration': 3.863}, {'end': 1541.318, 'text': 'However, then all the width is used up immediately.', 'start': 1538.575, 'duration': 2.743}, {'end': 1548.083, 'text': 'Because at that point, both the width of the entire container and the first column are set to one fraction unit.', 'start': 1541.758, 'duration': 6.325}, {'end': 1553.548, 'text': "So to get the behavior we want, we're going to use something called min max.", 'start': 1548.904, 'duration': 4.644}, {'end': 1556.73, 'text': "And we'll set our columns to be minimum 100 pixels.", 'start': 1554.388, 'duration': 2.342}, {'end': 1561.843, 'text': 'maximum one fraction unit.', 'start': 1560.242, 'duration': 1.601}], 'summary': 'Using min max, set columns to minimum 100 pixels and maximum one fraction unit', 'duration': 27.411, 'max_score': 1534.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1534432.jpg'}, {'end': 1689.426, 'src': 'embed', 'start': 1659.502, 'weight': 3, 'content': [{'end': 1662.064, 'text': "And that's because they are implicitly created.", 'start': 1659.502, 'duration': 2.562}, {'end': 1667.149, 'text': 'Because as you can see here, we only explicitly created two rows.', 'start': 1662.525, 'duration': 4.624}, {'end': 1671.372, 'text': 'However, with our current defined behavior for the columns,', 'start': 1667.489, 'duration': 3.883}, {'end': 1676.677, 'text': "we are going to need somewhere to place these items which can't fit in our explicit grid up here.", 'start': 1671.372, 'duration': 5.305}, {'end': 1683.143, 'text': 'So from five and onwards, we need to create new rows automatically in order to display our items.', 'start': 1676.977, 'duration': 6.166}, {'end': 1689.426, 'text': "And as we haven't told our grid how we want to style rows, that it has to add to the grid itself.", 'start': 1683.723, 'duration': 5.703}], 'summary': 'Implicitly create new rows from row 5 onwards to display items not fitting in the explicit grid.', 'duration': 29.924, 'max_score': 1659.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1659502.jpg'}], 'start': 1377.587, 'title': 'Advanced css grid concepts and responsive design', 'summary': 'Introduces advanced concepts for creating responsive grids in css, covering varying column and row behavior, using fr and min max units, and implicitly created rows to create an image grid.', 'chapters': [{'end': 1420.655, 'start': 1377.587, 'title': 'Css grid: advanced concepts', 'summary': 'Introduces the completion of the first section of the course, and the beginning of the second section focusing on advanced concepts and creating more responsive grids.', 'duration': 43.068, 'highlights': ['The first section of the course is completed, signifying progress in learning CSS Grid.', 'The second section will cover advanced concepts and creating more responsive grids.', 'The chapter emphasizes the continuation of learning and advanced techniques in CSS Grid.']}, {'end': 1766.889, 'start': 1421.056, 'title': 'Grid layout and responsive design', 'summary': 'Discusses creating a responsive grid layout using css, with examples of varying column and row behavior based on container width, including the usage of fr and min max units. it also addresses implicitly created rows and ties the concepts together to create an image grid.', 'duration': 345.833, 'highlights': ['Creating a responsive grid layout using CSS', 'Usage of fr and min max units for column behavior', 'Addressing implicitly created rows by defining their styling', 'Tying the concepts together to create an image grid']}], 'duration': 389.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1377587.jpg', 'highlights': ['The second section will cover advanced concepts and creating more responsive grids.', 'Creating a responsive grid layout using CSS', 'Usage of fr and min max units for column behavior', 'Addressing implicitly created rows by defining their styling', 'The first section of the course is completed, signifying progress in learning CSS Grid.']}, {'end': 2094.254, 'segs': [{'end': 1841.256, 'src': 'embed', 'start': 1766.889, 'weight': 0, 'content': [{'end': 1770.613, 'text': 'which gives us a nice responsive grid that varies the amount of columns.', 'start': 1766.889, 'duration': 3.724}, {'end': 1777.244, 'text': 'and the rows are implicitly created and are 75 pixels tall.', 'start': 1772.935, 'duration': 4.309}, {'end': 1783.416, 'text': "In the index.html, you can see that I've added an image to each of the items in the grid.", 'start': 1777.464, 'duration': 5.952}, {'end': 1786.761, 'text': "that's of course the images you can see here.", 'start': 1785.02, 'duration': 1.741}, {'end': 1790.144, 'text': "And this is already, I'd say a pretty cool grid.", 'start': 1787.242, 'duration': 2.902}, {'end': 1795.408, 'text': "However, not all of these images fit the frame they're given equally well.", 'start': 1790.504, 'duration': 4.904}, {'end': 1799.511, 'text': 'some of them might be more horizontal, while other images might be more vertical.', 'start': 1795.408, 'duration': 4.103}, {'end': 1804.175, 'text': 'I also have a few favorites, which I think deserve a little bit of extra attention.', 'start': 1800.111, 'duration': 4.064}, {'end': 1811.823, 'text': "And you can see that I've actually given some of these item classes like vertical, horizontal, and big.", 'start': 1805.216, 'duration': 6.607}, {'end': 1817.128, 'text': "These are the images which I don't think fit well into only one grid cell.", 'start': 1812.884, 'duration': 4.244}, {'end': 1821.592, 'text': "So let's go ahead and make the horizontal images twice as wide.", 'start': 1817.588, 'duration': 4.004}, {'end': 1825.816, 'text': "We'll head over to the CSS to the horizontal class.", 'start': 1821.612, 'duration': 4.204}, {'end': 1828.179, 'text': "And we'll set the grid column property.", 'start': 1826.457, 'duration': 1.722}, {'end': 1835.293, 'text': "Now, previously, we do something like one, that's the starting value.", 'start': 1830.731, 'duration': 4.562}, {'end': 1841.256, 'text': "And then, for example, span two, so that they'd span across two columns.", 'start': 1835.973, 'duration': 5.283}], 'summary': 'Created a responsive grid with varying columns and 75px tall rows. adjusted image sizes with classes like vertical, horizontal, and big.', 'duration': 74.367, 'max_score': 1766.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1766889.jpg'}, {'end': 2069.694, 'src': 'embed', 'start': 2016.767, 'weight': 3, 'content': [{'end': 2024.813, 'text': 'And then it simply continues laying out the next item here, here and then one here, leaving that spot here blank.', 'start': 2016.767, 'duration': 8.046}, {'end': 2029.517, 'text': "Wouldn't it be great if we somehow could fill these spots? Well, we can.", 'start': 2025.634, 'duration': 3.883}, {'end': 2034.408, 'text': "And to do that, we're going to use a property called grid auto flow.", 'start': 2030.504, 'duration': 3.904}, {'end': 2045.319, 'text': "It's by default set to row, meaning that it'll lay out the items one row at a time,", 'start': 2038.232, 'duration': 7.087}, {'end': 2053.379, 'text': 'just as we talked about starting here and going across the first row and then jumping next to the second row and continuing on like that.', 'start': 2045.319, 'duration': 8.06}, {'end': 2062.147, 'text': "However, if we set it to dense, we'll use so called dense packing algorithm, which attempts to fill the holes in the grid.", 'start': 2054, 'duration': 8.147}, {'end': 2069.694, 'text': "If there are holes in the grid, and smaller items come up later, then it'll move those up to fill the blank spaces.", 'start': 2063.068, 'duration': 6.626}], 'summary': 'Using grid auto flow property, we can fill blank spots using dense packing algorithm.', 'duration': 52.927, 'max_score': 2016.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2016767.jpg'}], 'start': 1766.889, 'title': 'Creating responsive and visually appealing grid layouts', 'summary': 'Covers the creation of a responsive grid with implicitly created rows that are 75 pixels tall, adding images with special attention to certain ones by assigning them classes, and manipulating image layouts using css grid properties like grid column, grid row, and grid auto flow to create visually appealing designs.', 'chapters': [{'end': 1817.128, 'start': 1766.889, 'title': 'Responsive grid and image layout', 'summary': 'Describes the creation of a responsive grid with implicitly created rows that are 75 pixels tall and adding images to the grid items, with special attention given to certain images by assigning them classes like vertical, horizontal, and big.', 'duration': 50.239, 'highlights': ['The chapter details the creation of a responsive grid with implicitly created rows that are 75 pixels tall, and the addition of images to the grid items.', 'Special attention is given to certain images by assigning them classes like vertical, horizontal, and big.']}, {'end': 2094.254, 'start': 1817.588, 'title': 'Css grid layout', 'summary': 'Explains how to manipulate the layout of images using css grid properties, such as grid column, grid row, and grid auto flow, to create visually appealing designs and fill blank spaces using the dense packing algorithm.', 'duration': 276.666, 'highlights': ['Explaining grid column and grid row properties for horizontal and vertical images', 'Utilizing auto value for grid column to prevent open spaces in the grid', 'Demonstrating the grid auto flow property and dense packing algorithm to fill blank spaces']}], 'duration': 327.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac1766889.jpg', 'highlights': ['The chapter details the creation of a responsive grid with implicitly created rows that are 75 pixels tall, and the addition of images to the grid items.', 'Special attention is given to certain images by assigning them classes like vertical, horizontal, and big.', 'Explaining grid column and grid row properties for horizontal and vertical images', 'Utilizing auto value for grid column to prevent open spaces in the grid', 'Demonstrating the grid auto flow property and dense packing algorithm to fill blank spaces']}, {'end': 2473.732, 'segs': [{'end': 2166.928, 'src': 'embed', 'start': 2094.774, 'weight': 0, 'content': [{'end': 2097.696, 'text': 'And this works regardless of how wide the screen is.', 'start': 2094.774, 'duration': 2.922}, {'end': 2103.58, 'text': 'As you can see, we have a super cool image grid now, which looks really hard to create.', 'start': 2098.116, 'duration': 5.464}, {'end': 2107.443, 'text': "actually, however, we've done it simply using these 20 lines of CSS.", 'start': 2103.58, 'duration': 3.863}, {'end': 2117.327, 'text': 'And finally, I want to mention that this dense feature here is an example of source order independence, which is a huge win for CSS.', 'start': 2108.479, 'duration': 8.848}, {'end': 2123.612, 'text': "It means that the grid can arrange the items regardless of how they're laid out in the.", 'start': 2118.047, 'duration': 5.565}, {'end': 2129.196, 'text': "Here we simply use the markup for what it's supposed to use for markup for content.", 'start': 2124.733, 'duration': 4.463}, {'end': 2133.939, 'text': "And we're using the CSS for what it's supposed to use for styling.", 'start': 2129.716, 'duration': 4.223}, {'end': 2137.781, 'text': "And we're not limited to whatever order we laid out the images initially.", 'start': 2134.559, 'duration': 3.222}, {'end': 2141.203, 'text': 'So source order independence gives you a lot of flexibility.', 'start': 2138.281, 'duration': 2.922}, {'end': 2148.207, 'text': 'So this marks the end of this section, you now know quite a lot about building advanced CSS grid layouts.', 'start': 2142.344, 'duration': 5.863}, {'end': 2153.11, 'text': "However, be sure to check out the bonus material if you're hungry to learn even more.", 'start': 2148.647, 'duration': 4.463}, {'end': 2166.928, 'text': "Thank you Hey, in this screencast, you're going to learn a new way of positioning and sizing the items on the grid using something called named lines.", 'start': 2154.151, 'duration': 12.777}], 'summary': 'Css grid allows source order independence and flexible layout. achieved using 20 lines of css.', 'duration': 72.154, 'max_score': 2094.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2094774.jpg'}, {'end': 2428.023, 'src': 'embed', 'start': 2397.774, 'weight': 5, 'content': [{'end': 2412.118, 'text': 'so this one here and we have a content end on the third row line, the third one here, meaning we have boxed in an area with content lines here, here,', 'start': 2397.774, 'duration': 14.344}, {'end': 2413.759, 'text': 'here, here and here.', 'start': 2412.118, 'duration': 1.641}, {'end': 2421.401, 'text': 'And now we can actually use grid area, which you, which you might remember from section one of this course,', 'start': 2415.319, 'duration': 6.082}, {'end': 2427.12, 'text': 'by simply doing grid area and set it to content like that.', 'start': 2422.824, 'duration': 4.296}, {'end': 2428.023, 'text': 'And it still works.', 'start': 2427.281, 'duration': 0.742}], 'summary': 'Demonstrated grid area usage for content layout.', 'duration': 30.249, 'max_score': 2397.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2397774.jpg'}], 'start': 2094.774, 'title': 'Css grid layouts', 'summary': 'Covers css source order independence and advanced grid layouts, showcasing a cool image grid using 20 lines of css, and demonstrating the flexibility and convenience of named grid lines and grid areas.', 'chapters': [{'end': 2141.203, 'start': 2094.774, 'title': 'Css: source order independence', 'summary': 'Demonstrates how to create a super cool image grid using just 20 lines of css, showcasing source order independence which allows flexibility in arranging items, regardless of their initial order.', 'duration': 46.429, 'highlights': ['The grid can arrange items regardless of their initial layout, providing flexibility - a huge win for CSS.', 'Creating a super cool image grid using just 20 lines of CSS, showcasing the simplicity and effectiveness of the approach.', 'Demonstrates source order independence, allowing for flexible arrangement of items regardless of their initial order.']}, {'end': 2473.732, 'start': 2142.344, 'title': 'Advanced css grid layouts', 'summary': 'Covers a new way of positioning and sizing items on the grid using named lines, demonstrating the flexibility and convenience it offers, and showcasing the use of grid area to define boxed-in areas within the grid.', 'duration': 331.388, 'highlights': ['The chapter covers a new way of positioning and sizing items on the grid using named lines.', 'Demonstrates the flexibility and convenience offered by named lines in grid layouts.', 'Showcases the use of grid area to define boxed-in areas within the grid.']}], 'duration': 378.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2094774.jpg', 'highlights': ['The grid can arrange items regardless of their initial layout, providing flexibility - a huge win for CSS.', 'Creating a super cool image grid using just 20 lines of CSS, showcasing the simplicity and effectiveness of the approach.', 'Demonstrates source order independence, allowing for flexible arrangement of items regardless of their initial order.', 'The chapter covers a new way of positioning and sizing items on the grid using named lines.', 'Demonstrates the flexibility and convenience offered by named lines in grid layouts.', 'Showcases the use of grid area to define boxed-in areas within the grid.']}, {'end': 2853.5, 'segs': [{'end': 2572.883, 'src': 'embed', 'start': 2514.355, 'weight': 0, 'content': [{'end': 2523.483, 'text': "So let's start with the justification, which defines and distributes space between and round the items along the row axis from left to right.", 'start': 2514.355, 'duration': 9.128}, {'end': 2535.156, 'text': "So if we set, justify content and set that to end, as you can see, that'll shuffle all the content over to the right hand side,", 'start': 2524.424, 'duration': 10.732}, {'end': 2539.18, 'text': 'to the end of that axis, the row axis.', 'start': 2535.156, 'duration': 4.024}, {'end': 2542.183, 'text': 'the default value here was start.', 'start': 2539.18, 'duration': 3.003}, {'end': 2544.285, 'text': 'you can also do center like that.', 'start': 2542.183, 'duration': 2.102}, {'end': 2545.966, 'text': "that'll center it along the row axis.", 'start': 2544.285, 'duration': 1.681}, {'end': 2549.169, 'text': "So let's combine this with a line content as well.", 'start': 2546.286, 'duration': 2.883}, {'end': 2564.32, 'text': "And do and, for example, I'll push all the content down to the lower end of the grid, because aligning controls the content along the column axis,", 'start': 2554.154, 'duration': 10.166}, {'end': 2567.241, 'text': 'the vertical one, which goes from top to bottom.', 'start': 2564.32, 'duration': 2.921}, {'end': 2572.883, 'text': "If we do center here as well, we'll fully center the items in the grid.", 'start': 2567.741, 'duration': 5.142}], 'summary': 'Justify content controls item positioning on row axis, align content controls item positioning on column axis, allowing for flexible layout design.', 'duration': 58.528, 'max_score': 2514.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2514355.jpg'}, {'end': 2655.676, 'src': 'embed', 'start': 2604.67, 'weight': 2, 'content': [{'end': 2607.311, 'text': 'So the items have an equal amount of space around them.', 'start': 2604.67, 'duration': 2.641}, {'end': 2612.299, 'text': "Finally, there's also the space around.", 'start': 2609.158, 'duration': 3.141}, {'end': 2619.661, 'text': 'this one is pretty similar to space, evenly though each of the items have a half size space on either end,', 'start': 2612.299, 'duration': 7.362}, {'end': 2627.243, 'text': "meaning that if you have two items besides each other, that'll give a full size space between them, though here,", 'start': 2619.661, 'duration': 7.582}, {'end': 2635.485, 'text': 'in between the first column line and the first item, we only have a half space, as this item forces a half space on this side.', 'start': 2627.243, 'duration': 8.242}, {'end': 2640.467, 'text': "though the grid line itself doesn't force the grid to create any space for it.", 'start': 2636.485, 'duration': 3.982}, {'end': 2650.573, 'text': 'Though in between these two, both of the items force the grid to add a half space in between them, resulting in full size space.', 'start': 2641.208, 'duration': 9.365}, {'end': 2655.676, 'text': 'So that was the basics of justifying and aligning the content.', 'start': 2652.094, 'duration': 3.582}], 'summary': 'Equal space around items, half size space on either end, half space between items, basics of justifying and aligning content.', 'duration': 51.006, 'max_score': 2604.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2604670.jpg'}], 'start': 2474.532, 'title': 'Grid alignment and justification', 'summary': 'Explains how to align and justify items on a grid using properties like justify-items and align-items, with examples of centering items and distributing space evenly. it also covers the use of justify content and align content to control the distribution and alignment of items along the row and column axes within the grid.', 'chapters': [{'end': 2572.883, 'start': 2474.532, 'title': 'Grid justification and alignment', 'summary': 'Demonstrates how to justify and align the entire content of a grid, including the use of justify content and align content to control the distribution and alignment of items along the row and column axes within the grid.', 'duration': 98.351, 'highlights': ['The chapter explains how to use justify content to define and distribute space between and round the items along the row axis, with examples such as setting it to end which shuffles all the content to the right hand side, and center which centers it along the row axis.', 'It also covers align content, which controls the content along the column axis, with demonstrations of pushing the content to the lower end of the grid and fully centering the items in the grid by setting it to center.']}, {'end': 2853.5, 'start': 2573.783, 'title': 'Grid alignment and justification', 'summary': 'Covers the concepts of aligning and justifying items on a grid, including properties like justify-items and align-items, with examples of centering items and distributing space evenly.', 'duration': 279.717, 'highlights': ['The chapter covers the concepts of aligning and justifying items on a grid', 'Properties like justify-items and align-items are explained', 'Examples of centering items and distributing space evenly are demonstrated']}], 'duration': 378.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2474532.jpg', 'highlights': ['The chapter explains how to use justify content to define and distribute space between and round the items along the row axis, with examples such as setting it to end which shuffles all the content to the right hand side, and center which centers it along the row axis.', 'It also covers align content, which controls the content along the column axis, with demonstrations of pushing the content to the lower end of the grid and fully centering the items in the grid by setting it to center.', 'The chapter covers the concepts of aligning and justifying items on a grid', 'Properties like justify-items and align-items are explained', 'Examples of centering items and distributing space evenly are demonstrated']}, {'end': 3343.091, 'segs': [{'end': 2906.044, 'src': 'embed', 'start': 2877.104, 'weight': 1, 'content': [{'end': 2882.566, 'text': 'with auto fit as many columns as we can fit into the grid given these constraints here.', 'start': 2877.104, 'duration': 5.462}, {'end': 2886.612, 'text': 'they should be minimum 100 pixels and maximum one fraction unit.', 'start': 2883.51, 'duration': 3.102}, {'end': 2891.075, 'text': 'And that, as you probably remember from the screencast in the second section,', 'start': 2886.852, 'duration': 4.223}, {'end': 2896.918, 'text': 'will give a nice responsive behavior where the amount of columns grows with the size of the grid.', 'start': 2891.075, 'duration': 5.843}, {'end': 2900.26, 'text': 'like this if we large in this page, boom there.', 'start': 2896.918, 'duration': 3.342}, {'end': 2906.044, 'text': 'the grid crossed the 300 pixel threshold, meaning it could fit three columns in instead of two.', 'start': 2900.26, 'duration': 5.784}], 'summary': 'Grid columns are set to be responsive, with a minimum of 100 pixels and a maximum of one fraction unit, allowing for growth as the grid size increases.', 'duration': 28.94, 'max_score': 2877.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2877104.jpg'}, {'end': 2961.048, 'src': 'embed', 'start': 2925.793, 'weight': 0, 'content': [{'end': 2929.855, 'text': "And that'll be apparent if we try to enlarge the grid even more, like this.", 'start': 2925.793, 'duration': 4.062}, {'end': 2939.078, 'text': "this Now, what you can see that autofill actually added a fifth column, even though we don't have a fifth element to add there.", 'start': 2929.975, 'duration': 9.103}, {'end': 2944.66, 'text': 'Whereas auto fit made sure that the four items we have actually fit the grid.', 'start': 2939.718, 'duration': 4.942}, {'end': 2946.601, 'text': 'Now under the hood.', 'start': 2945.24, 'duration': 1.361}, {'end': 2950.582, 'text': "what's happening here is actually that both of them add new column tracks,", 'start': 2946.601, 'duration': 3.981}, {'end': 2961.048, 'text': 'though auto fit actually collapses those new columns to zero pixels in width, so that the current items you have in the grid, when defined like this,', 'start': 2950.582, 'duration': 10.466}], 'summary': 'Autofill added a fifth column, while autofit ensures the four items fit the grid.', 'duration': 35.255, 'max_score': 2925.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2925793.jpg'}, {'end': 3071.876, 'src': 'embed', 'start': 2976.096, 'weight': 2, 'content': [{'end': 2978.978, 'text': 'so that was the difference between autofit and autofill.', 'start': 2976.096, 'duration': 2.882}, {'end': 2992.11, 'text': 'In this example, I will show you how you can use CSS grids to create an article layout.', 'start': 2984.286, 'duration': 7.824}, {'end': 2996.052, 'text': "So in this example, I have a plain article that I've written.", 'start': 2993.491, 'duration': 2.561}, {'end': 3001.976, 'text': 'I wrote it originally in Markdown, and then I generated this HTML using a Markdown compiler.', 'start': 2996.553, 'duration': 5.423}, {'end': 3005.858, 'text': "So it's pretty nice.", 'start': 3003.096, 'duration': 2.762}, {'end': 3012.121, 'text': "It has ULs, it has some P's, there's a div here for the code highlighting.", 'start': 3005.918, 'duration': 6.203}, {'end': 3018.36, 'text': 'and a figure tag for the image, and just basic HTML.', 'start': 3013.238, 'duration': 5.122}, {'end': 3034.245, 'text': "And I'm just going to go straight ahead and turn this into grid, and then I will explain what I'm trying to accomplish with that.", 'start': 3019.66, 'duration': 14.585}, {'end': 3037.006, 'text': 'So now we have a grid, which is very funky.', 'start': 3034.465, 'duration': 2.541}, {'end': 3042.408, 'text': 'Move everything where I want them to be.', 'start': 3038.847, 'duration': 3.561}, {'end': 3048.343, 'text': 'and there we go.', 'start': 3045.201, 'duration': 3.142}, {'end': 3053.506, 'text': "so now i've defined the grid, which has three columns.", 'start': 3048.343, 'duration': 5.163}, {'end': 3060.97, 'text': "there's the first column that's 80 pixels, then there's a main column that takes one fraction of the space,", 'start': 3053.506, 'duration': 7.464}, {'end': 3065.192, 'text': "and then there's the right column that takes 80 pixels.", 'start': 3060.97, 'duration': 4.222}, {'end': 3071.876, 'text': 'and i have this rule here which says that every element inside the article should start at the grid column line number two.', 'start': 3065.192, 'duration': 6.684}], 'summary': 'Demonstration of using css grids to create an article layout with 3 columns: 80 pixels, 1 fraction, and 80 pixels.', 'duration': 95.78, 'max_score': 2976.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2976096.jpg'}, {'end': 3170.355, 'src': 'embed', 'start': 3135.188, 'weight': 4, 'content': [{'end': 3139.029, 'text': 'So this is a way of saying make the element take the whole width.', 'start': 3135.188, 'duration': 3.841}, {'end': 3147.092, 'text': 'And this is just radically simpler than any other way to accomplish the same thing.', 'start': 3140.57, 'duration': 6.522}, {'end': 3156.112, 'text': "If you don't have a CSS grid, you end up having to say that these elements here should have a margin, a standard margin,", 'start': 3147.791, 'duration': 8.321}, {'end': 3159.893, 'text': 'and this should not cancel out the margin you set by default.', 'start': 3156.112, 'duration': 3.781}, {'end': 3170.355, 'text': 'And often this is very tricky, because you often end up having to have custom HTML just to handle where things should,', 'start': 3160.913, 'duration': 9.442}], 'summary': 'Using css grid simplifies layout design, eliminating the need for custom html and complex margin handling.', 'duration': 35.167, 'max_score': 3135.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac3135188.jpg'}], 'start': 2854.101, 'title': 'Css grid fundamentals', 'summary': 'Explains the key differences between auto fit and auto fill in css grids, showcasing how auto fit dynamically adjusts column count based on grid size, while auto fill adds extra columns even if not needed. additionally, it demonstrates the use of css grids for creating an article layout, highlighting the simplicity and advantages of grid columns and elements positioning.', 'chapters': [{'end': 2976.096, 'start': 2854.101, 'title': 'Difference between auto fit and auto fill', 'summary': 'Explains the difference between auto fit and auto fill in css grids, demonstrating how auto fit dynamically adjusts column count based on grid size, while auto fill adds extra columns even if not needed.', 'duration': 121.995, 'highlights': ['Auto fit dynamically adjusts column count based on grid size', 'Auto fill adds extra columns even if not needed', 'Auto fill added a fifth column, even though not needed']}, {'end': 3343.091, 'start': 2976.096, 'title': 'Css grid for article layout', 'summary': 'Demonstrates how to use css grids to create an article layout, with specific details on grid columns and elements positioning, illustrating the simplicity and advantages of using css grids for layout design.', 'duration': 366.995, 'highlights': ['Using CSS grids to define a layout with three columns, where the first and right columns are 80 pixels each and the main column takes one fraction of the space, achieving a specific design.', 'Setting grid column lines to control the positioning of elements inside the article, with practical examples of utilizing CSS grids for layout control and flexibility.', 'Applying grid column settings to make elements take the whole width, showcasing the ease and simplicity of achieving design objectives with CSS grids.', 'Describing the challenges of achieving the same layout without CSS grids, emphasizing the complexity and limitations of traditional CSS layout methods.', 'Explaining the limitation of CSS grids in handling separate grid rows and the inability to eliminate spaces between elements, providing insights into the constraints of CSS grid for specific layout requirements.']}], 'duration': 488.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac2854101.jpg', 'highlights': ['Auto fill adds extra columns even if not needed', 'Auto fit dynamically adjusts column count based on grid size', 'Using CSS grids to define a layout with three columns, achieving a specific design', 'Setting grid column lines to control the positioning of elements inside the article', 'Applying grid column settings to make elements take the whole width, showcasing the ease and simplicity of achieving design objectives with CSS grids', 'Describing the challenges of achieving the same layout without CSS grids, emphasizing the complexity and limitations of traditional CSS layout methods']}, {'end': 3762.411, 'segs': [{'end': 3559.845, 'src': 'embed', 'start': 3533.871, 'weight': 0, 'content': [{'end': 3541.375, 'text': "However, if we're going to create a more overall layout with both rows and columns, then you should definitely use CSS grid,", 'start': 3533.871, 'duration': 7.504}, {'end': 3549.179, 'text': "as it'll give you much more flexibility and simpler markup than if you were to, for example, try to use flex box to create two dimensional layouts.", 'start': 3541.375, 'duration': 7.804}, {'end': 3555.362, 'text': "Okay, there's also another overall difference, which is that flex box takes basis in the content.", 'start': 3549.639, 'duration': 5.723}, {'end': 3559.845, 'text': "it's so called content first, whereas grid is layout first.", 'start': 3555.362, 'duration': 4.483}], 'summary': 'Use css grid for more flexibility and simpler markup compared to flex box for two dimensional layouts.', 'duration': 25.974, 'max_score': 3533.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac3533871.jpg'}, {'end': 3683.055, 'src': 'embed', 'start': 3658.491, 'weight': 2, 'content': [{'end': 3665.834, 'text': "This layout first versus content first is a bit abstract, and it's not something you think about when you develop, though it's nice to be aware of it.", 'start': 3658.491, 'duration': 7.343}, {'end': 3671.25, 'text': "So finally, let's actually combine the two, because that's what you want to do.", 'start': 3667.048, 'duration': 4.202}, {'end': 3676.472, 'text': 'you want to combine CSS grid with Flexbox and then get the best of both worlds.', 'start': 3671.25, 'duration': 5.222}, {'end': 3683.055, 'text': "So now what we're going to do, we're going to take this header here, move it down into our edge layout.", 'start': 3677.573, 'duration': 5.482}], 'summary': 'Combining css grid with flexbox to leverage both layouts.', 'duration': 24.564, 'max_score': 3658.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac3658491.jpg'}], 'start': 3343.391, 'title': 'Css grid and flexbox comparison', 'summary': 'Discusses the differences between css grid and flexbox, highlighting their specific use cases, layout handling, and combination to leverage the best of both worlds, emphasizing simplicity, flexibility, and cleaner html and css.', 'chapters': [{'end': 3762.411, 'start': 3343.391, 'title': 'Css grid and flexbox comparison', 'summary': 'Discusses the differences between css grid and flexbox, highlighting their specific use cases, layout handling, and combination to leverage the best of both worlds, emphasizing simplicity, flexibility, and cleaner html and css.', 'duration': 419.02, 'highlights': ['CSS Grid provides much more flexibility and simpler markup than Flexbox for two-dimensional layouts.', 'Flexbox is ideal for one-dimensional layouts and provides flexibility in aligning content within a container.', 'CSS Grid and Flexbox can be combined to leverage the best of both worlds, providing simplicity and flexibility.']}], 'duration': 419.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/t6CBKf8K_Ac/pics/t6CBKf8K_Ac3343391.jpg', 'highlights': ['CSS Grid provides much more flexibility and simpler markup than Flexbox for two-dimensional layouts.', 'Flexbox is ideal for one-dimensional layouts and provides flexibility in aligning content within a container.', 'CSS Grid and Flexbox can be combined to leverage the best of both worlds, providing simplicity and flexibility.']}], 'highlights': ['The CSS grid layout module provides more flexibility than any other layout system or framework.', 'Widespread browser support and increasing global website traffic using CSS Grid', 'Creating flexible layouts with 12 columns and easy layout experimentation', 'The grid can arrange items regardless of their initial layout, providing flexibility - a huge win for CSS.', 'Auto fill adds extra columns even if not needed', 'CSS Grid provides much more flexibility and simpler markup than Flexbox for two-dimensional layouts.', 'The interactive scrimball screencast allows viewers to jump into the code and make real-time changes.', 'The chapter explains how to use justify content to define and distribute space between and round the items along the row axis, with examples such as setting it to end which shuffles all the content to the right hand side, and center which centers it along the row axis.', 'The chapter covers the concepts of aligning and justifying items on a grid', 'The first section of the course is completed, signifying progress in learning CSS Grid.']}