title
CSS Grid Layout Crash Course

description
2022 Updated Crash Course - https://www.youtube.com/watch?v=0xMQfnTU6oo In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items. CODE: Code for this tutorial http://www.traversymedia.com/downloads/cssgrid.zip BUILD A CSS GRID WEBSITE: https://www.youtube.com/watch?v=moBhzSC455o BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia EDUONIX COURSES: Please use affiliate links from website below http://www.traversymedia.com/eduonix-courses

detail
{'title': 'CSS Grid Layout Crash Course', 'heatmap': [{'end': 339.088, 'start': 308.55, 'weight': 0.752}, {'end': 976.174, 'start': 955.627, 'weight': 0.81}, {'end': 1407.449, 'start': 1369.011, 'weight': 0.771}, {'end': 1541.262, 'start': 1521.73, 'weight': 1}], 'summary': "'css grid layout crash course' covers css grid basics, grid layouts, html file creation, and css grid usage, css grid features, and css grid layout, emphasizing features like browser support, flexbox vs. css grid, fractional units, auto rows, nested grids, grid layout setup, and item manipulation.", 'chapters': [{'end': 49.322, 'segs': [{'end': 34.303, 'src': 'embed', 'start': 7.611, 'weight': 0, 'content': [{'end': 12.174, 'text': "Hey, what's going on guys? So I've been getting a lot of requests for a CSS grid tutorial.", 'start': 7.611, 'duration': 4.563}, {'end': 16.976, 'text': "So in this video we're going to cover all the basics of the new CSS grid layout feature,", 'start': 12.514, 'duration': 4.462}, {'end': 22.96, 'text': 'which allows us to create two dimensional layouts on a web page and align items in both columns and rows.', 'start': 16.976, 'duration': 5.984}, {'end': 26.822, 'text': 'All browsers now support the grid layout as of March of 2017.', 'start': 23.52, 'duration': 3.302}, {'end': 30.824, 'text': "So let's go ahead and dive in and take a look at CSS grids.", 'start': 26.822, 'duration': 4.002}, {'end': 34.303, 'text': 'This video is sponsored by DevMountain.', 'start': 32.042, 'duration': 2.261}], 'summary': 'Css grid tutorial covering basics of new css grid layout feature, supported by all browsers as of march 2017.', 'duration': 26.692, 'max_score': 7.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o7611.jpg'}], 'start': 7.611, 'title': 'Css grid basics', 'summary': 'Provides an overview of the new css grid layout feature, noting that all browsers now support the grid layout as of march 2017.', 'chapters': [{'end': 49.322, 'start': 7.611, 'title': 'Css grid basics', 'summary': 'Provides an overview of the new css grid layout feature, covering its basics and noting that all browsers now support the grid layout as of march 2017.', 'duration': 41.711, 'highlights': ['The new CSS grid layout feature allows the creation of two-dimensional layouts on a web page and aligns items in both columns and rows.', 'All browsers now support the grid layout as of March 2017.', 'DevMountain is a 12-week design and development boot camp aimed at securing a full-time job in the industry.']}], 'duration': 41.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o7611.jpg', 'highlights': ['The new CSS grid layout feature allows the creation of two-dimensional layouts on a web page and aligns items in both columns and rows.', 'All browsers now support the grid layout as of March 2017.']}, {'end': 482.386, 'segs': [{'end': 133.677, 'src': 'embed', 'start': 71.634, 'weight': 0, 'content': [{'end': 75.116, 'text': 'so i think that this is a really nice visual representation of the difference.', 'start': 71.634, 'duration': 3.482}, {'end': 77.698, 'text': 'So one dimension versus two dimensions.', 'start': 75.636, 'duration': 2.062}, {'end': 82.341, 'text': "So with Flexbox, we basically have some columns and they're aligned in a row.", 'start': 77.738, 'duration': 4.603}, {'end': 86.645, 'text': 'With CSS Grid, we have some columns and rows.', 'start': 83.142, 'duration': 3.503}, {'end': 90.608, 'text': 'And you can see that this column here actually has some rows on the side of it.', 'start': 86.705, 'duration': 3.903}, {'end': 97.269, 'text': "So it's aligned with multiple rows, and it just gives you a two-dimensional effect.", 'start': 91.148, 'duration': 6.121}, {'end': 103.111, 'text': "Now, you can achieve this kind of layout with Flexbox, but it's done in a much different way.", 'start': 97.87, 'duration': 5.241}, {'end': 107.432, 'text': "You'll have multiple flex items with all kinds of alignments and so on.", 'start': 103.131, 'duration': 4.301}, {'end': 111.132, 'text': 'But with CSS grids, this is all one grid.', 'start': 107.472, 'duration': 3.66}, {'end': 113.173, 'text': 'You can do this just by having one grid.', 'start': 111.172, 'duration': 2.001}, {'end': 116.554, 'text': "And I'm not going to go too much further into it than that.", 'start': 113.873, 'duration': 2.681}, {'end': 119.814, 'text': 'But just know that Flexbox is a one-dimensional layout.', 'start': 116.974, 'duration': 2.84}, {'end': 122.375, 'text': 'CSS Grids is a two-dimensional layout.', 'start': 119.854, 'duration': 2.521}, {'end': 124.795, 'text': "All right, so let's jump in here.", 'start': 122.395, 'duration': 2.4}, {'end': 126.716, 'text': "Now, I'm using the Atom Text Editor.", 'start': 124.875, 'duration': 1.841}, {'end': 133.677, 'text': "And I'm using a plugin called Atom Live Server, which just allows me to run the file on my local host over here.", 'start': 126.776, 'duration': 6.901}], 'summary': 'Comparison between flexbox and css grid layouts, highlighting their one-dimensional and two-dimensional nature.', 'duration': 62.043, 'max_score': 71.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o71634.jpg'}, {'end': 181.187, 'src': 'embed', 'start': 154.702, 'weight': 1, 'content': [{'end': 160.483, 'text': "Now the first thing we're going to do, we're going to start off very simple and we're going to create a layout with a main column and a sidebar.", 'start': 154.702, 'duration': 5.781}, {'end': 166.124, 'text': "So that's something that's very simple, also very common that you see on websites and applications.", 'start': 160.523, 'duration': 5.601}, {'end': 170.385, 'text': "So what I'll do is in the body here, we're going to create a wrapper class.", 'start': 166.784, 'duration': 3.601}, {'end': 173.663, 'text': "Okay, now you don't have to call it wrapper.", 'start': 172.122, 'duration': 1.541}, {'end': 174.744, 'text': 'You can call it whatever you want.', 'start': 173.683, 'duration': 1.061}, {'end': 181.187, 'text': 'In fact, a lot of people will call it a grid because it is a grid container or a container or whatever you want to call it.', 'start': 174.784, 'duration': 6.403}], 'summary': 'Creating a layout with a main column and a sidebar for websites and applications.', 'duration': 26.485, 'max_score': 154.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o154702.jpg'}, {'end': 339.088, 'src': 'heatmap', 'start': 308.55, 'weight': 0.752, 'content': [{'end': 323.002, 'text': "so. to do that, we use grid, dash template, dash columns all right, and let's say we want a 70 column and a 30 column and save, and that's it.", 'start': 308.55, 'duration': 14.452}, {'end': 326.705, 'text': "that's going to give us a you know, our main div and then our sidebar div.", 'start': 323.002, 'duration': 3.703}, {'end': 339.088, 'text': "Now, since this is a grid, no matter how many divs we have in our wrapper, it's going to continue to follow this map, this 70%, 30%.", 'start': 328.112, 'duration': 10.976}], 'summary': 'Using grid, dash template, and dash columns, create a 70-30 layout for main and sidebar divs.', 'duration': 30.538, 'max_score': 308.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o308550.jpg'}, {'end': 386.734, 'src': 'embed', 'start': 356.31, 'weight': 4, 'content': [{'end': 360.052, 'text': 'okay, like in flexbox or bootstrap or whatever, where we define?', 'start': 356.31, 'duration': 3.742}, {'end': 364.835, 'text': 'well, i guess not with flexbox, But in a grid system like Bootstrap we define our rows.', 'start': 360.052, 'duration': 4.783}, {'end': 374.603, 'text': "Now, we can change this to, let's say, let's do 40%, 30%, 30%, and save.", 'start': 365.795, 'duration': 8.808}, {'end': 376.985, 'text': "And that's going to split it into three columns.", 'start': 374.983, 'duration': 2.002}, {'end': 380.126, 'text': 'So 40%, 30%, 30%.', 'start': 377.065, 'duration': 3.061}, {'end': 381.209, 'text': "And it's going to follow that.", 'start': 380.128, 'duration': 1.081}, {'end': 386.734, 'text': "Even though we have four divs and we only set three values here, it's going to continue to follow that.", 'start': 381.349, 'duration': 5.385}], 'summary': 'In a grid system like bootstrap, we can define rows with percentages, e.g. 40%, 30%, 30%.', 'duration': 30.424, 'max_score': 356.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o356310.jpg'}, {'end': 464.499, 'src': 'embed', 'start': 433.036, 'weight': 6, 'content': [{'end': 433.996, 'text': 'You can use pixels.', 'start': 433.036, 'duration': 0.96}, {'end': 437.258, 'text': "And save it, and you'll see that now we have a space here.", 'start': 434.837, 'duration': 2.421}, {'end': 442.321, 'text': "Now this is the column gap, so it's separating the columns.", 'start': 438.458, 'duration': 3.863}, {'end': 445.684, 'text': "If you want to separate it this way, then that's a row.", 'start': 442.802, 'duration': 2.882}, {'end': 450.948, 'text': 'So we would say grid-row-gap and set that to 1m.', 'start': 446.024, 'duration': 4.924}, {'end': 454.771, 'text': 'So now we have that spacing.', 'start': 453.49, 'duration': 1.281}, {'end': 464.499, 'text': "Now if you're going to use the same spacing here, which you probably often will, you can actually cancel this out and you can just do grid-gap.", 'start': 455.232, 'duration': 9.267}], 'summary': 'Using grid-gap to set column and row spacing, allowing for easy customization.', 'duration': 31.463, 'max_score': 433.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o433036.jpg'}], 'start': 49.322, 'title': 'Grid layouts', 'summary': 'Explains the difference between flexbox and css grid, highlighting that flexbox is for one-dimensional layouts, while css grid is for two-dimensional layouts. it also introduces the basics of grid system, emphasizing its ease of use and flexibility.', 'chapters': [{'end': 216.901, 'start': 49.322, 'title': 'Flexbox vs. grid layouts', 'summary': 'Explains the difference between flexbox and css grid, highlighting that flexbox is for one-dimensional layouts in columns or rows, while css grid is for two-dimensional layouts for columns and rows, showing a visual representation of the difference and introducing the atom text editor and atom live server for practical demonstration.', 'duration': 167.579, 'highlights': ['Flexbox is for one-dimensional layouts in columns or rows, while CSS Grid is for two-dimensional layouts for columns and rows, providing a clear differentiation between the two layout techniques.', 'Use of Atom Text Editor and Atom Live Server for practical demonstration, showcasing practical tools for implementing layout concepts.', 'Introduction to creating a layout with a main column and a sidebar using HTML and CSS, demonstrating the practical application of layout concepts in web development.', 'Explanation of the difference between Flexbox and CSS Grid using a visual representation, aiding in understanding the conceptual dissimilarity between the two layout techniques.', 'Clarification that Flexbox can achieve a two-dimensional effect but in a different manner compared to CSS Grid, emphasizing the versatility of CSS Grid for two-dimensional layouts.']}, {'end': 482.386, 'start': 217.481, 'title': 'Grid system basics', 'summary': 'Introduces the basics of grid system, including defining columns, creating gaps, and demonstrating the automatic following of column width percentages when adding new elements, emphasizing the ease of use and flexibility of grid layouts.', 'duration': 264.905, 'highlights': ['The chapter introduces the basics of grid system, including defining columns, creating gaps, and demonstrating the automatic following of column width percentages when adding new elements. The speaker explains how to define column widths using grid-template-columns and demonstrates the automatic following of column width percentages when adding new elements, showcasing the flexibility of grid layouts.', 'The demonstration emphasizes the ease of use and flexibility of grid layouts. The speaker emphasizes the ease of use and flexibility of grid layouts, showcasing how the grid system allows for effortless manipulation of column widths and automatic adjustment of layout when new elements are added.', 'The speaker explains how to create gaps in the grid layout using grid-column-gap and grid-row-gap, or simplifying it using grid-gap. The speaker explains how to create gaps in the grid layout using grid-column-gap and grid-row-gap, providing options for customization, and further simplifying it using grid-gap for the same effect.']}], 'duration': 433.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o49322.jpg', 'highlights': ['Flexbox is for one-dimensional layouts in columns or rows, while CSS Grid is for two-dimensional layouts for columns and rows, providing a clear differentiation between the two layout techniques.', 'Introduction to creating a layout with a main column and a sidebar using HTML and CSS, demonstrating the practical application of layout concepts in web development.', 'Explanation of the difference between Flexbox and CSS Grid using a visual representation, aiding in understanding the conceptual dissimilarity between the two layout techniques.', 'Clarification that Flexbox can achieve a two-dimensional effect but in a different manner compared to CSS Grid, emphasizing the versatility of CSS Grid for two-dimensional layouts.', 'The chapter introduces the basics of grid system, including defining columns, creating gaps, and demonstrating the automatic following of column width percentages when adding new elements.', 'The demonstration emphasizes the ease of use and flexibility of grid layouts, showcasing how the grid system allows for effortless manipulation of column widths and automatic adjustment of layout when new elements are added.', 'The speaker explains how to create gaps in the grid layout using grid-column-gap and grid-row-gap, or simplifying it using grid-gap, providing options for customization, and further simplifying it using grid-gap for the same effect.', 'Use of Atom Text Editor and Atom Live Server for practical demonstration, showcasing practical tools for implementing layout concepts.']}, {'end': 774.207, 'segs': [{'end': 536.244, 'src': 'embed', 'start': 482.487, 'weight': 0, 'content': [{'end': 484.808, 'text': "Now, what I'm going to do is I'm going to create another file.", 'start': 482.487, 'duration': 2.321}, {'end': 487.65, 'text': "I'm just going to call it index2.html.", 'start': 484.948, 'duration': 2.702}, {'end': 489.931, 'text': "Okay, because we're going to create a couple files.", 'start': 487.67, 'duration': 2.261}, {'end': 497.396, 'text': "I want you guys to have this as a reference and I don't want to change it up too much, so I'm going to just create another file.", 'start': 489.931, 'duration': 7.465}, {'end': 500.418, 'text': "Okay, so let's go ahead and put some structure in here.", 'start': 497.856, 'duration': 2.562}, {'end': 502.159, 'text': "I'll just get rid of this stuff.", 'start': 501.039, 'duration': 1.12}, {'end': 502.84, 'text': "We don't need that.", 'start': 502.199, 'duration': 0.641}, {'end': 506.242, 'text': "I'll say CSS grid.", 'start': 502.86, 'duration': 3.382}, {'end': 510.737, 'text': "and we'll put our style tags in here.", 'start': 508.636, 'duration': 2.101}, {'end': 512.937, 'text': 'All right.', 'start': 510.757, 'duration': 2.18}, {'end': 518.379, 'text': "So what I'm going to do now is let's again, create, let's create a wrapper.", 'start': 513.277, 'duration': 5.102}, {'end': 524.12, 'text': "So we'll say wrapper and these are going to be, we're not going to put as much content.", 'start': 518.599, 'duration': 5.521}, {'end': 529.062, 'text': "So let's put a div and let's just say lorem four.", 'start': 524.22, 'duration': 4.842}, {'end': 536.244, 'text': "Okay So just a couple of words and then I'm just going to copy that and we'll paste a bunch in.", 'start': 529.082, 'duration': 7.162}], 'summary': 'Creating index2.html with css grid layout and wrapper div for lorem four text.', 'duration': 53.757, 'max_score': 482.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o482487.jpg'}, {'end': 675.506, 'src': 'embed', 'start': 621.258, 'weight': 2, 'content': [{'end': 627.543, 'text': "But the fractional I think it's called is the recommended, because when you start to use percentages,", 'start': 621.258, 'duration': 6.285}, {'end': 632.446, 'text': "you're going to run into issues with margin and padding, especially when you get into nesting and so on.", 'start': 627.543, 'duration': 4.903}, {'end': 634.208, 'text': 'So you want to stick to these fractionals.', 'start': 632.487, 'duration': 1.721}, {'end': 647.556, 'text': 'Now, if we were to have three 1FRs, we can actually create a shorter syntax for this, especially imagine if we had 12 of these.', 'start': 635.825, 'duration': 11.731}, {'end': 651.74, 'text': "So what we could do is let's take our grid template columns.", 'start': 648.377, 'duration': 3.363}, {'end': 657.906, 'text': 'And instead of putting three separate ones, we can actually say repeat.', 'start': 653.662, 'duration': 4.244}, {'end': 667.684, 'text': "and then here we can say let's repeat three times one fr, save that, and there we go.", 'start': 659.801, 'duration': 7.883}, {'end': 672.505, 'text': 'if we wanted to do four frs, so four columns, we could do that as well.', 'start': 667.684, 'duration': 4.821}, {'end': 675.506, 'text': "now we don't have to just do one fr here.", 'start': 672.505, 'duration': 3.001}], 'summary': 'Using fractional units is recommended to avoid issues with margin and padding, especially when nesting, and a shorter syntax can be used for creating multiple fractional units.', 'duration': 54.248, 'max_score': 621.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o621258.jpg'}, {'end': 732.449, 'src': 'embed', 'start': 702.673, 'weight': 4, 'content': [{'end': 705.696, 'text': "Okay, that's going to separate them out.", 'start': 702.673, 'duration': 3.023}, {'end': 708.859, 'text': "So now let's talk about height.", 'start': 707.478, 'duration': 1.381}, {'end': 717.743, 'text': "So by default, if we were to Actually, first let's just deal with fixed heights.", 'start': 709.22, 'duration': 8.523}, {'end': 723.285, 'text': "So to do that, let's do grid-auto-rows.", 'start': 718.584, 'duration': 4.701}, {'end': 727.607, 'text': "And we're going to set this to, let's say, 100 pixels.", 'start': 724.526, 'duration': 3.081}, {'end': 732.449, 'text': "Save And now they're all going to be 100 pixels high, which is really helpful.", 'start': 728.067, 'duration': 4.382}], 'summary': 'Setting grid-auto-rows to 100 pixels creates fixed heights for grid items.', 'duration': 29.776, 'max_score': 702.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o702673.jpg'}], 'start': 482.487, 'title': 'Html file creation and css grid usage', 'summary': 'Covers creating a new html file named index2.html, adding structure with css grid and a wrapper, and using fractional units in css grid for flexible heights with the repeat function.', 'chapters': [{'end': 563.268, 'start': 482.487, 'title': 'Creating html file and adding structure', 'summary': 'Covers creating a new html file named index2.html, adding structure to it by including css grid and a wrapper, and pasting content from another file, index.html.', 'duration': 80.781, 'highlights': ['Creating a new HTML file named index2.html The speaker creates a new HTML file named index2.html as part of the tutorial.', 'Adding structure with CSS grid and wrapper The tutorial includes adding structure to the new file by using CSS grid and creating a wrapper for content.', 'Pasting content from index.html The speaker pastes content from another file, index.html, into the newly created file for reference and background.']}, {'end': 774.207, 'start': 563.268, 'title': 'Using fractional units in css grid', 'summary': 'Explains how to use fractional units in css grid, emphasizing the benefits over percentages and pixels, and demonstrating the use of repeat function for shorter syntax. it also covers setting fixed heights and making them flexible in the grid.', 'duration': 210.939, 'highlights': ['The chapter explains the usage of fractional units (fr) in CSS grid, highlighting its benefits over percentages and pixels. This is demonstrated by using a template columns function to divide the grid into fractions, such as 1fr, 2fr.', 'It demonstrates the use of the repeat function in CSS grid for shorter syntax, showing how to create a shorter syntax for defining columns, and how to combine different fractions using repeat function, providing a more efficient way to define grid layout.', 'The chapter covers setting fixed heights in CSS grid using grid-auto-rows, and the flexibility of the heights is explained by commenting out the fixed height and showing how the grid adjusts to the content. It emphasizes the simplicity and flexibility of setting heights in CSS grid.']}], 'duration': 291.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o482487.jpg', 'highlights': ['Creating a new HTML file named index2.html as part of the tutorial.', 'Adding structure with CSS grid and creating a wrapper for content.', 'Demonstrating the usage of fractional units (fr) in CSS grid and its benefits over percentages and pixels.', 'Explaining the use of the repeat function in CSS grid for shorter syntax and more efficient grid layout definition.', 'Covering setting fixed heights in CSS grid using grid-auto-rows and demonstrating the flexibility of heights.']}, {'end': 1096.136, 'segs': [{'end': 801.27, 'src': 'embed', 'start': 774.287, 'weight': 0, 'content': [{'end': 789.262, 'text': "So let's say grid, Auto rows and what we can do is we can set min max, all right, and we're going to say we want these to be 100 pixels and auto.", 'start': 774.287, 'duration': 14.975}, {'end': 794.666, 'text': "so this is going to, if i save it, it's actually going to stretch out to fill the content.", 'start': 789.262, 'duration': 5.404}, {'end': 801.27, 'text': "it's going to be 100 pixels by default, but if we go, if our content goes beyond that 100 pixels, then it's going to follow it.", 'start': 794.666, 'duration': 6.604}], 'summary': 'Using grid auto rows with min max set to 100 pixels and auto for content stretching.', 'duration': 26.983, 'max_score': 774.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o774287.jpg'}, {'end': 997.064, 'src': 'heatmap', 'start': 955.627, 'weight': 1, 'content': [{'end': 956.107, 'text': "Let's see.", 'start': 955.627, 'duration': 0.48}, {'end': 959.448, 'text': "Let's also add some padding to the inner divs of the nested.", 'start': 956.167, 'duration': 3.281}, {'end': 961.409, 'text': "So we'll say padding 1M.", 'start': 960.169, 'duration': 1.24}, {'end': 964.91, 'text': 'There we go.', 'start': 961.429, 'duration': 3.481}, {'end': 970.032, 'text': 'So you see that everything is going to adjust to accommodate that style.', 'start': 964.95, 'duration': 5.082}, {'end': 971.472, 'text': 'All right.', 'start': 970.052, 'duration': 1.42}, {'end': 976.174, 'text': "And no matter how many divs I put in this nested, let's go ahead and just paste in some more.", 'start': 971.512, 'duration': 4.662}, {'end': 977.994, 'text': 'There we go.', 'start': 977.534, 'duration': 0.46}, {'end': 981.055, 'text': "So you'll see that they'll just automatically look correct.", 'start': 978.034, 'duration': 3.021}, {'end': 983.196, 'text': "They're going to generate as an actual grid.", 'start': 981.115, 'duration': 2.081}, {'end': 987.898, 'text': "All right, so I hope that I'm being clear in this tutorial.", 'start': 984.656, 'duration': 3.242}, {'end': 991.621, 'text': "I'm actually pretty new to CSS Grid, as are most people.", 'start': 987.978, 'duration': 3.643}, {'end': 997.064, 'text': "All right, so I'm going to keep this for you guys as a reference, and I'm going to create one more file.", 'start': 992.501, 'duration': 4.563}], 'summary': 'Tutorial on css grid layout with padding and nested divs.', 'duration': 41.437, 'max_score': 955.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o955627.jpg'}], 'start': 774.287, 'title': 'Css grid features', 'summary': 'Covers the use of css grid auto rows to create flexible row heights, with the default size being 100 pixels but capable of stretching, and demonstrates creating nested grids and sub grids using css grid, including setting grid display, template columns, auto rows, gap, and padding, to accommodate and style nested divs.', 'chapters': [{'end': 827.883, 'start': 774.287, 'title': 'Css grid auto rows and flexibility', 'summary': 'Illustrates the use of css grid auto rows to create flexible row heights, with the default size being 100 pixels but capable of stretching to accommodate content beyond that size.', 'duration': 53.596, 'highlights': ['The use of CSS grid auto rows allows for flexible row heights, defaulting to 100 pixels but capable of stretching to accommodate content beyond that size.', 'The row height flexibility is specific to individual rows, allowing for a combination of fixed and flexible row heights within the grid layout.']}, {'end': 1096.136, 'start': 827.883, 'title': 'Css grid nesting and sub grids', 'summary': 'Demonstrates how to create nested grids and sub grids using css grid, including setting grid display, template columns, auto rows, gap, and padding, to accommodate and style nested divs. it also explores creating individual boxes within a wrapper displayed as a grid.', 'duration': 268.253, 'highlights': ['The chapter discusses creating nested grids using CSS Grid, including setting the nested div to display as a grid, defining grid template columns for layout, setting grid auto rows for height, grid gap for spacing, and adding padding to the inner divs. Demonstrating how to create nested grids using CSS Grid, including setting grid display, template columns, auto rows, gap, and padding.', 'The tutorial also covers creating individual boxes within a wrapper displayed as a grid, with each box having a unique class and content. Exploring the creation of individual boxes within a wrapper displayed as a grid, each having a unique class and content.']}], 'duration': 321.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o774287.jpg', 'highlights': ['The chapter covers the use of CSS grid auto rows to create flexible row heights, defaulting to 100 pixels but capable of stretching.', 'Demonstrates creating nested grids using CSS Grid, including setting grid display, template columns, auto rows, gap, and padding.']}, {'end': 1673.938, 'segs': [{'end': 1199.447, 'src': 'embed', 'start': 1168.278, 'weight': 2, 'content': [{'end': 1171.739, 'text': "And it's going to put the element at the start of its column.", 'start': 1168.278, 'duration': 3.461}, {'end': 1174.739, 'text': 'And if you know Flexbox, this is pretty similar.', 'start': 1172.599, 'duration': 2.14}, {'end': 1176.36, 'text': 'We have our flex justify.', 'start': 1174.799, 'duration': 1.561}, {'end': 1180.681, 'text': 'And alignments there as well, and we use start and end and center.', 'start': 1177.1, 'duration': 3.581}, {'end': 1184.462, 'text': 'But this is going to align the items to the start, all of them.', 'start': 1180.681, 'duration': 3.781}, {'end': 1185.683, 'text': "Let's try Center.", 'start': 1184.462, 'duration': 1.221}, {'end': 1188.984, 'text': "Okay, that's going to put them in the center.", 'start': 1185.683, 'duration': 3.301}, {'end': 1194.786, 'text': "Let's do end and that'll put them at the end and then the default is stretch.", 'start': 1188.984, 'duration': 5.802}, {'end': 1199.447, 'text': 'Okay, so stretch is just going to, you know, stretch it across the whole thing.', 'start': 1194.786, 'duration': 4.661}], 'summary': 'Demonstrating flexbox alignment with start, center, end, and stretch.', 'duration': 31.169, 'max_score': 1168.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1168278.jpg'}, {'end': 1320.752, 'src': 'embed', 'start': 1294.674, 'weight': 4, 'content': [{'end': 1303.941, 'text': 'You can either do all items with justify items, align items, or you can do just individual elements here with align self and justify self.', 'start': 1294.674, 'duration': 9.267}, {'end': 1308.636, 'text': "All right, so the last concept that I want to talk about is one that's a little confusing.", 'start': 1305.148, 'duration': 3.488}, {'end': 1310.14, 'text': 'It was a little confusing to me at first.', 'start': 1308.676, 'duration': 1.464}, {'end': 1313.006, 'text': 'It still kind of is, but it is using lines.', 'start': 1310.2, 'duration': 2.806}, {'end': 1314.951, 'text': "So I'm going to bring down an image here.", 'start': 1313.387, 'duration': 1.564}, {'end': 1320.752, 'text': 'which, if I can get this freaking thing in here, what the hell.', 'start': 1316.929, 'duration': 3.823}], 'summary': 'The speaker discusses the use of lines and concepts related to alignment in web design.', 'duration': 26.078, 'max_score': 1294.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1294674.jpg'}, {'end': 1407.449, 'src': 'heatmap', 'start': 1362.869, 'weight': 1, 'content': [{'end': 1369.011, 'text': "and then let's take box 1 and the properties, for this is going to be grid column and grid row.", 'start': 1362.869, 'duration': 6.142}, {'end': 1376.892, 'text': "so let's say grid column and let's say we want from 1 to 3, we want it to span from 1 to 3.", 'start': 1369.011, 'duration': 7.881}, {'end': 1384.814, 'text': "actually, before I do that, let's just save it back to what it looks like, naturally, and then yeah, alright,", 'start': 1376.892, 'duration': 7.922}, {'end': 1388.215, 'text': "and then we'll put back grid column 1 to 3 and let's save.", 'start': 1384.814, 'duration': 3.401}, {'end': 1394.319, 'text': "So just like, if we look at this diagram, we're saying take it from here to here.", 'start': 1389.155, 'duration': 5.164}, {'end': 1396.361, 'text': 'So 1 to 3.', 'start': 1394.499, 'duration': 1.862}, {'end': 1398.122, 'text': "And it's going to knock these ones over.", 'start': 1396.361, 'duration': 1.761}, {'end': 1401.885, 'text': 'And then at the same time, we can go this way.', 'start': 1399.703, 'duration': 2.182}, {'end': 1403.966, 'text': 'We can go vertical.', 'start': 1401.945, 'duration': 2.021}, {'end': 1407.449, 'text': "Let's say we want it to go from 1 to 3 that way as well.", 'start': 1404.406, 'duration': 3.043}], 'summary': 'Using grid columns and rows, box 1 spans from 1 to 3 horizontally and vertically.', 'duration': 25.346, 'max_score': 1362.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1362869.jpg'}, {'end': 1445.505, 'src': 'embed', 'start': 1417.135, 'weight': 0, 'content': [{'end': 1418.936, 'text': 'And notice that now we have these over here.', 'start': 1417.135, 'duration': 1.801}, {'end': 1421.377, 'text': 'This is what is meant by two-dimensional.', 'start': 1418.976, 'duration': 2.401}, {'end': 1424.699, 'text': 'This is what is much, much different than Flexbox.', 'start': 1421.437, 'duration': 3.262}, {'end': 1430.862, 'text': 'And it can get a little complicated understanding the placement, at least in my opinion, but it is really powerful.', 'start': 1425.239, 'duration': 5.623}, {'end': 1438.365, 'text': "And once you're done with this, you may want to, if you're really interested in CSS grids, I suggest looking at some more advanced concepts.", 'start': 1431.622, 'duration': 6.743}, {'end': 1443.524, 'text': "So let's now take Box 2.", 'start': 1439.646, 'duration': 3.878}, {'end': 1445.505, 'text': 'Oh, you know what? They all say box four.', 'start': 1443.524, 'duration': 1.981}], 'summary': 'Introducing two-dimensional css grids, more powerful than flexbox, with potential for advanced concepts.', 'duration': 28.37, 'max_score': 1417.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1417135.jpg'}, {'end': 1545.165, 'src': 'heatmap', 'start': 1521.73, 'weight': 1, 'content': [{'end': 1528.454, 'text': "Now, another awesome thing about grids that you don't really get with Flexbox is you can overlap things, you can overlap elements.", 'start': 1521.73, 'duration': 6.724}, {'end': 1536.199, 'text': "So let's take this box for here and let's say we want grid column one.", 'start': 1528.934, 'duration': 7.265}, {'end': 1538.4, 'text': 'OK, grid column one.', 'start': 1536.219, 'duration': 2.181}, {'end': 1541.262, 'text': "And then for the row, we'll say grid row.", 'start': 1538.821, 'duration': 2.441}, {'end': 1545.165, 'text': "we're going to say two to four.", 'start': 1542.603, 'duration': 2.562}], 'summary': 'Grids allow overlapping elements, unlike flexbox.', 'duration': 23.435, 'max_score': 1521.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1521730.jpg'}], 'start': 1096.136, 'title': 'Css grid layout', 'summary': 'Covers setting up a grid layout with three columns and auto rows, adjusting the gap, justifying and aligning items using justify items, align items, align self, and justify self, and the usage of lines. it also explains the basics of css grids, emphasizing the ability to define grid columns and rows, manipulate grid items, and create two-dimensional layouts, with examples and suggestions for further learning.', 'chapters': [{'end': 1314.951, 'start': 1096.136, 'title': 'Grid layout: justifying and aligning items', 'summary': 'Covers setting up a grid layout with three columns and auto rows, adjusting the gap, justifying and aligning items using justify items, align items, align self, and justify self, and the usage of lines.', 'duration': 218.815, 'highlights': ['The chapter covers setting up a grid layout with three columns, set to one fraction, two fractions, and one fraction respectively, and setting the auto rows to stretch to fit any content inside of it.', 'Demonstrates the usage of justify items to align items to the start, center, end, or stretch across the grid.', 'Explains the usage of align items to align items in the other direction, with options to start, center, end, or stretch.', 'Illustrates the usage of align self and justify self to individually align elements within the grid.', 'Introduces the concept of using lines in grid layout, which may be confusing at first.']}, {'end': 1673.938, 'start': 1316.929, 'title': 'Understanding css grid basics', 'summary': 'Explains the basics of css grids, emphasizing the ability to define grid columns and rows, manipulate grid items, and create two-dimensional layouts, with examples and suggestions for further learning.', 'duration': 357.009, 'highlights': ['The chapter explains how to define grid columns and rows, demonstrating the use of grid column and grid row properties to specify the span and position of grid items, offering practical examples and code demonstrations.', 'It highlights the ability to manipulate grid items and rearrange the grid layout using grid column and grid row properties, showcasing how the placement of items can be adjusted to create different visual arrangements.', 'The chapter emphasizes the power of CSS grids in creating two-dimensional layouts, illustrating how grid items can span across defined columns and rows, showcasing the difference between CSS grids and Flexbox, and suggesting further exploration of advanced concepts.', 'The transcript offers practical examples and code demonstrations to showcase the ability of CSS grids in creating two-dimensional layouts, emphasizing the differences between CSS grids and Flexbox and recommending further exploration of advanced concepts for those interested in CSS grids.']}], 'duration': 577.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jV8B24rSN5o/pics/jV8B24rSN5o1096136.jpg', 'highlights': ['The chapter emphasizes the power of CSS grids in creating two-dimensional layouts, illustrating how grid items can span across defined columns and rows, showcasing the difference between CSS grids and Flexbox, and suggesting further exploration of advanced concepts.', 'The chapter explains how to define grid columns and rows, demonstrating the use of grid column and grid row properties to specify the span and position of grid items, offering practical examples and code demonstrations.', 'Demonstrates the usage of justify items to align items to the start, center, end, or stretch across the grid.', 'Introduces the concept of using lines in grid layout, which may be confusing at first.', 'Illustrates the usage of align self and justify self to individually align elements within the grid.']}], 'highlights': ['All browsers now support the grid layout as of March 2017.', 'The new CSS grid layout feature allows the creation of two-dimensional layouts on a web page and aligns items in both columns and rows.', 'Flexbox is for one-dimensional layouts in columns or rows, while CSS Grid is for two-dimensional layouts for columns and rows, providing a clear differentiation between the two layout techniques.', 'The chapter emphasizes the power of CSS grids in creating two-dimensional layouts, illustrating how grid items can span across defined columns and rows, showcasing the difference between CSS grids and Flexbox, and suggesting further exploration of advanced concepts.', 'Introduction to creating a layout with a main column and a sidebar using HTML and CSS, demonstrating the practical application of layout concepts in web development.', 'Demonstrates creating nested grids using CSS Grid, including setting grid display, template columns, auto rows, gap, and padding.', 'Demonstrating the usage of fractional units (fr) in CSS grid and its benefits over percentages and pixels.', 'Explaining the use of the repeat function in CSS grid for shorter syntax and more efficient grid layout definition.', 'The chapter introduces the basics of grid system, including defining columns, creating gaps, and demonstrating the automatic following of column width percentages when adding new elements.', 'The demonstration emphasizes the ease of use and flexibility of grid layouts, showcasing how the grid system allows for effortless manipulation of column widths and automatic adjustment of layout when new elements are added.', 'The speaker explains how to create gaps in the grid layout using grid-column-gap and grid-row-gap, or simplifying it using grid-gap, providing options for customization, and further simplifying it using grid-gap for the same effect.', 'Use of Atom Text Editor and Atom Live Server for practical demonstration, showcasing practical tools for implementing layout concepts.', 'Creating a new HTML file named index2.html as part of the tutorial.', 'Adding structure with CSS grid and creating a wrapper for content.', 'Covering setting fixed heights in CSS grid using grid-auto-rows and demonstrating the flexibility of heights.', 'The chapter covers the use of CSS grid auto rows to create flexible row heights, defaulting to 100 pixels but capable of stretching.', 'Demonstrates the usage of justify items to align items to the start, center, end, or stretch across the grid.', 'Introduces the concept of using lines in grid layout, which may be confusing at first.', 'Illustrates the usage of align self and justify self to individually align elements within the grid.']}