title
STOP The CSS Grid Confusion - 2 Ways to GRID!

description
Go to http://www.get.online to search for your (dot)ONLINE domain now! -- Hey all, today we're going to cover the CSS grid, and specifically how to structure a layout using the CSS grid implicit and explicit methods! Codepen (not responsive, maybe you can make it responsive using media queries and the CSS grid properties!?): https://codepen.io/designcourse/pen/rNarPaJ Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'STOP The CSS Grid Confusion - 2 Ways to GRID!', 'heatmap': [{'end': 520.972, 'start': 498.385, 'weight': 0.72}, {'end': 725.926, 'start': 698.451, 'weight': 0.768}, {'end': 965.679, 'start': 909.694, 'weight': 0.736}, {'end': 1287.223, 'start': 1253.261, 'weight': 0.802}], 'summary': 'Tutorial covers css grid layout techniques, including setting up layouts, defining columns and rows, using grid template areas, and positioning items in templates, providing a comprehensive understanding of css grid with practical examples and benefits of usage.', 'chapters': [{'end': 105.772, 'segs': [{'end': 56.539, 'src': 'embed', 'start': 24.259, 'weight': 0, 'content': [{'end': 33.287, 'text': 'and that means setting up the actual layouts and the chloros and the columns in using two different methods for doing so,', 'start': 24.259, 'duration': 9.028}, {'end': 35.549, 'text': 'and that is implicit and explicit.', 'start': 33.287, 'duration': 2.262}, {'end': 41.313, 'text': "so I'm going to switch over here and i i'm going to walk you through shortly.", 'start': 35.549, 'duration': 5.764}, {'end': 43.714, 'text': 'once the actual real tutorial begins.', 'start': 41.313, 'duration': 2.401}, {'end': 56.539, 'text': "i'm going to walk you through creating this layout and how to look at it in terms of rows and columns and grid areas and naming them and grid lines and all that good stuff.", 'start': 43.714, 'duration': 12.825}], 'summary': 'Tutorial on creating and naming grid layouts using implicit and explicit methods.', 'duration': 32.28, 'max_score': 24.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ24259.jpg'}, {'end': 94.267, 'src': 'embed', 'start': 65.605, 'weight': 1, 'content': [{'end': 69.268, 'text': 'We all need a platform to help showcase our creative work in the very best light.', 'start': 65.605, 'duration': 3.663}, {'end': 74.112, 'text': 'The thing about being a designer or developer is that you need to make sure you get the details right.', 'start': 69.648, 'duration': 4.464}, {'end': 78.556, 'text': 'And one of the ways you can do that is to build your portfolio on a .online Domain Extension.', 'start': 74.492, 'duration': 4.064}, {'end': 82.98, 'text': "So if you're planning to build your own website, you should definitely begin your search with .online.", 'start': 78.576, 'duration': 4.404}, {'end': 86.743, 'text': "It's new, it's trendy, and you're likely to find the choice of your name on .online.", 'start': 83.1, 'duration': 3.643}, {'end': 94.267, 'text': 'go to www.get.online or click on the link in the description below to get your .online domain now.', 'start': 86.983, 'duration': 7.284}], 'summary': 'Create a portfolio on .online for showcasing creative work effectively. visit get.online for domain registration.', 'duration': 28.662, 'max_score': 65.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ65605.jpg'}], 'start': 0.202, 'title': 'Css grid layout tutorial', 'summary': 'Explains the css grid layout, covering the set up of layouts, columns, and rows using implicit and explicit methods, and also highlights the benefits of using .online domain extension for building a portfolio website.', 'chapters': [{'end': 105.772, 'start': 0.202, 'title': 'Css grid layout tutorial', 'summary': 'Explains the css grid layout, covering the set up of layouts, columns, and rows using implicit and explicit methods, and also highlights the benefits of using .online domain extension for building a portfolio website.', 'duration': 105.57, 'highlights': ['The chapter covers setting up layouts, columns, and rows using implicit and explicit methods for the CSS grid. The tutorial discusses setting up actual layouts, columns, and rows using two different methods: implicit and explicit.', 'The benefits of using .online Domain Extension for building a portfolio website are emphasized. The video highlights the importance of building a portfolio on a .online Domain Extension, as it is new, trendy, and likely to offer a wider choice of names.']}], 'duration': 105.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ202.jpg', 'highlights': ['The tutorial discusses setting up actual layouts, columns, and rows using two different methods: implicit and explicit.', 'The benefits of using .online Domain Extension for building a portfolio website are emphasized.']}, {'end': 256.231, 'segs': [{'end': 211.276, 'src': 'embed', 'start': 182.346, 'weight': 0, 'content': [{'end': 190.537, 'text': "And when we're using the approach of explicit naming of the CSS grid columns and rows.", 'start': 182.346, 'duration': 8.191}, {'end': 194.64, 'text': 'The columns start up here in the first column.', 'start': 191.638, 'duration': 3.002}, {'end': 200.726, 'text': 'This line right here is defined as being number one, then two and three and then four.', 'start': 194.76, 'duration': 5.966}, {'end': 206.271, 'text': 'So we have three columns, but we have four vertical lines here.', 'start': 201.226, 'duration': 5.045}, {'end': 208.232, 'text': "So they're named one, two, three, four.", 'start': 206.551, 'duration': 1.681}, {'end': 211.276, 'text': 'Same thing with your rows.', 'start': 209.073, 'duration': 2.203}], 'summary': 'Using explicit css grid naming with 3 columns and 4 vertical lines.', 'duration': 28.93, 'max_score': 182.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ182346.jpg'}, {'end': 265.396, 'src': 'embed', 'start': 238.062, 'weight': 3, 'content': [{'end': 242.344, 'text': "There's also negative values which have certain purposes that you can use.", 'start': 238.062, 'duration': 4.282}, {'end': 250.669, 'text': "We're not going to use any negative values to define our grid areas, but they do have certain advantages in certain situations that you can use.", 'start': 242.525, 'duration': 8.144}, {'end': 251.689, 'text': "I'm not going to cover it here.", 'start': 250.729, 'duration': 0.96}, {'end': 253.03, 'text': 'I think that could be a different tutorial.', 'start': 251.729, 'duration': 1.301}, {'end': 255.231, 'text': "It's a little bit more of an advanced concept.", 'start': 253.05, 'duration': 2.181}, {'end': 256.231, 'text': 'All right.', 'start': 255.931, 'duration': 0.3}, {'end': 259.353, 'text': "So what we're going to do, I'm going to minimize this.", 'start': 256.291, 'duration': 3.062}, {'end': 265.396, 'text': "We're going to come back actually to this and this will start to make sense in a little bit.", 'start': 259.373, 'duration': 6.023}], 'summary': 'Negative values have advantages in certain situations. advanced concept not covered here.', 'duration': 27.334, 'max_score': 238.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ238062.jpg'}], 'start': 105.852, 'title': 'Css grid techniques', 'summary': 'Covers basic concepts of structuring css grid, defining columns and rows, explicit naming of grid lines, and an overview of negative values and their usage.', 'chapters': [{'end': 256.231, 'start': 105.852, 'title': 'Css grid techniques', 'summary': 'Covers the basic concepts of structuring css grid, including defining columns and rows and explicit naming of grid lines, with an overview of negative values and their usage.', 'duration': 150.379, 'highlights': ['The chapter covers the basic concepts of structuring CSS grid, including defining columns and rows and explicit naming of grid lines, with an overview of negative values and their usage.', 'The layout has three columns and four rows, and different grid areas are defined by specifying the number of columns and rows they span.', 'Explicit naming of CSS grid columns and rows is demonstrated, with the clarification that the number of grid lines may exceed the number of columns and rows.', "The tutorial also briefly mentions the use of negative values in defining grid areas, indicating that it's an advanced concept and not covered in this tutorial."]}], 'duration': 150.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ105852.jpg', 'highlights': ['The layout has three columns and four rows, and different grid areas are defined by specifying the number of columns and rows they span.', 'Explicit naming of CSS grid columns and rows is demonstrated, with the clarification that the number of grid lines may exceed the number of columns and rows.', 'The chapter covers the basic concepts of structuring CSS grid, including defining columns and rows and explicit naming of grid lines, with an overview of negative values and their usage.', "The tutorial also briefly mentions the use of negative values in defining grid areas, indicating that it's an advanced concept and not covered in this tutorial."]}, {'end': 573.129, 'segs': [{'end': 306.558, 'src': 'embed', 'start': 279.282, 'weight': 0, 'content': [{'end': 283.344, 'text': "Oh, you see it's happened here, by the way, just boilerplate HTML, empty body tag.", 'start': 279.282, 'duration': 4.062}, {'end': 285.224, 'text': "We're referencing a main CSS.", 'start': 283.384, 'duration': 1.84}, {'end': 289.366, 'text': "We're gonna use a Sass in here, although we're not using any Sass specific functions.", 'start': 285.265, 'duration': 4.101}, {'end': 291.207, 'text': 'So you can just have a CSS file if you wish.', 'start': 289.426, 'duration': 1.781}, {'end': 299.593, 'text': "we'll get to this CSS after we create the necessary HTML elements that we want.", 'start': 292.268, 'duration': 7.325}, {'end': 306.558, 'text': 'so when it comes to a grid I container, you want to have an overall container that defines the grid itself.', 'start': 299.593, 'duration': 6.965}], 'summary': 'Using boilerplate html and sass for css, creating grid with container', 'duration': 27.276, 'max_score': 279.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ279282.jpg'}, {'end': 412.031, 'src': 'embed', 'start': 362.725, 'weight': 1, 'content': [{'end': 363.825, 'text': 'What section is this?', 'start': 362.725, 'duration': 1.1}, {'end': 368.887, 'text': 'Well, the HTML semantic element for this could possibly be main, all right?', 'start': 363.965, 'duration': 4.922}, {'end': 371.628, 'text': "So we're going to put for this block.", 'start': 368.947, 'duration': 2.681}, {'end': 372.649, 'text': "we're going to call it main.", 'start': 371.628, 'duration': 1.021}, {'end': 381.372, 'text': "coming back here, we'll just say main, and I'm just gonna say main, I'm not putting any content inside of it.", 'start': 373.669, 'duration': 7.703}, {'end': 388.394, 'text': "the next section I don't know why my navbar is not showing up for me.", 'start': 381.372, 'duration': 7.022}, {'end': 391.815, 'text': 'the next section could be we can call this nom.', 'start': 388.394, 'duration': 3.421}, {'end': 397.818, 'text': "so when you're using the CSS grid, the order of your HTML elements isn't all that important.", 'start': 391.815, 'duration': 6.003}, {'end': 406.306, 'text': 'uh, in terms of like, which comes first like header or whatever, because we use the css grid to position those plate, these, these elements,', 'start': 397.818, 'duration': 8.488}, {'end': 407.887, 'text': 'on the grid container.', 'start': 406.306, 'duration': 1.581}, {'end': 412.031, 'text': 'um, so what would be next, instead of me reverting back and forth?', 'start': 407.887, 'duration': 4.144}], 'summary': 'Discussed html semantic elements and css grid positioning for webpage sections.', 'duration': 49.306, 'max_score': 362.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ362725.jpg'}, {'end': 522.232, 'src': 'heatmap', 'start': 498.385, 'weight': 3, 'content': [{'end': 506.452, 'text': 'but i decided to use css background property so i can use the the background position cover property for this.', 'start': 498.385, 'duration': 8.067}, {'end': 512.581, 'text': "so we're just going to call this class of candy div class candy, all right and just leave it blank, All right.", 'start': 506.452, 'duration': 6.129}, {'end': 513.022, 'text': "And that's it.", 'start': 512.621, 'duration': 0.401}, {'end': 514.544, 'text': "That's all we need to do at this point.", 'start': 513.282, 'duration': 1.262}, {'end': 516.626, 'text': "Now we're going to head to the CSS.", 'start': 515.044, 'duration': 1.582}, {'end': 520.972, 'text': 'And so just to get the body stuff out of the way.', 'start': 517.167, 'duration': 3.805}, {'end': 522.232, 'text': 'All right.', 'start': 520.991, 'duration': 1.241}], 'summary': 'Using css background property with background position cover for candy div class. heading to css for body stuff.', 'duration': 23.847, 'max_score': 498.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ498385.jpg'}], 'start': 256.291, 'title': 'Html and css basics', 'summary': 'Covers creating html elements based on a mockup, including a boilerplate html structure, and using css grid layout to position elements, with an introduction to css properties and usage of semantic elements.', 'chapters': [{'end': 299.593, 'start': 256.291, 'title': 'Creating html for mockup', 'summary': 'Covers the creation of necessary html elements based on a mockup, including a boilerplate html structure with an empty body tag and reference to a main css, with a mention of using sass.', 'duration': 43.302, 'highlights': ['The chapter covers the creation of necessary HTML elements based on a mockup, including a boilerplate HTML structure with an empty body tag and reference to a main CSS, with a mention of using Sass.', 'Mention of using Sass, although not using any Sass specific functions, offering the option to use a CSS file instead.']}, {'end': 573.129, 'start': 299.593, 'title': 'Css grid layout basics', 'summary': "Covers the basics of setting up a grid container in html using semantic elements such as 'main' and 'section', which allows positioning of elements using css grid, illustrated with six items placed on the grid container. the speaker also introduces the usage of css properties like display grid and background position cover.", 'duration': 273.536, 'highlights': ["Setting up a grid container using semantic elements like 'main' and 'section' The speaker discusses using semantic elements like 'main' and 'section' in HTML to define the grid container for positioning elements using CSS grid.", 'Illustrating the placement of six items on the grid container The speaker explains the process of placing six items on the grid container using CSS grid for positioning and mentions the order of HTML elements not being important when using CSS grid.', "Introducing the usage of CSS properties like display grid and background position cover The speaker introduces the usage of CSS properties like 'display grid' and 'background position cover' for styling and positioning elements within the grid container."]}], 'duration': 316.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ256291.jpg', 'highlights': ['The chapter covers the creation of necessary HTML elements based on a mockup, including a boilerplate HTML structure with an empty body tag and reference to a main CSS.', "Setting up a grid container using semantic elements like 'main' and 'section'.", 'Illustrating the placement of six items on the grid container using CSS grid for positioning and mentioning the order of HTML elements not being important.', 'Introducing the usage of CSS properties like display grid and background position cover.']}, {'end': 1046.646, 'segs': [{'end': 598.739, 'src': 'embed', 'start': 573.129, 'weight': 2, 'content': [{'end': 579.831, 'text': "you get out the inspector and then it'll show you the grid that you currently have going on here.", 'start': 573.129, 'duration': 6.702}, {'end': 585.433, 'text': "And now just because we have CSS or the display grid property, we still, we don't have enough to work off.", 'start': 579.851, 'duration': 5.582}, {'end': 586.893, 'text': 'You can see these little tabs here.', 'start': 585.673, 'duration': 1.22}, {'end': 591.895, 'text': "If you turn on the display inline numbers, you'll see how this works here in a second though.", 'start': 586.953, 'duration': 4.942}, {'end': 598.739, 'text': "Continuing on, we'll think about our columns first.", 'start': 592.795, 'duration': 5.944}], 'summary': 'Using the inspector, display grid property, and inline numbers to work with columns.', 'duration': 25.61, 'max_score': 573.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ573129.jpg'}, {'end': 657.115, 'src': 'embed', 'start': 621.132, 'weight': 0, 'content': [{'end': 624.433, 'text': "The second column is slightly larger, so we'll say that's like 1.2.", 'start': 621.132, 'duration': 3.301}, {'end': 627.075, 'text': "And then this one we'll say is like 1.5.", 'start': 624.433, 'duration': 2.642}, {'end': 634.978, 'text': 'So grid template columns will be 1fr, 1.2fr, and 1.5fr.', 'start': 627.075, 'duration': 7.903}, {'end': 635.539, 'text': "And that's it.", 'start': 635.099, 'duration': 0.44}, {'end': 637.4, 'text': 'You just separate these with spaces.', 'start': 635.559, 'duration': 1.841}, {'end': 640.862, 'text': 'So the next up is grid template rows.', 'start': 638.34, 'duration': 2.522}, {'end': 647.067, 'text': "So going back to our mock up here, we'll see we have one, two, three, four rows.", 'start': 641.583, 'duration': 5.484}, {'end': 657.115, 'text': 'And, you know, keeping in mind the distance between or the size of each of these, we can think about how to set up those fraction units.', 'start': 647.828, 'duration': 9.287}], 'summary': 'Using grid template columns with 1fr, 1.2fr, and 1.5fr, and considering four rows for grid template rows.', 'duration': 35.983, 'max_score': 621.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ621132.jpg'}, {'end': 725.926, 'src': 'heatmap', 'start': 698.451, 'weight': 0.768, 'content': [{'end': 706.838, 'text': "For instance, we'll say height is 100 viewport height, margin 2em, just so we can push it away from the sides.", 'start': 698.451, 'duration': 8.387}, {'end': 708.8, 'text': 'So we save that.', 'start': 707.398, 'duration': 1.402}, {'end': 709.66, 'text': "We'll go back.", 'start': 709.02, 'duration': 0.64}, {'end': 711.819, 'text': "There we go, it's a little bit easier to read.", 'start': 710.558, 'duration': 1.261}, {'end': 717.201, 'text': 'So we can see on the columns itself, it says one, two, three, and four.', 'start': 711.879, 'duration': 5.322}, {'end': 720.503, 'text': "That's the name of those grid column lines.", 'start': 717.502, 'duration': 3.001}, {'end': 725.926, 'text': 'Same thing with the rows, one, two, three, four, and then all the way down here is five.', 'start': 720.983, 'duration': 4.943}], 'summary': 'Using grid layout with column and row names to improve readability.', 'duration': 27.475, 'max_score': 698.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ698451.jpg'}, {'end': 810.363, 'src': 'embed', 'start': 782.216, 'weight': 3, 'content': [{'end': 785.797, 'text': "So we're going to try those two CSS properties first.", 'start': 782.216, 'duration': 3.581}, {'end': 787.178, 'text': 'So we target main.', 'start': 785.937, 'duration': 1.241}, {'end': 797.094, 'text': 'and we say grid column start one, grid column end is three.', 'start': 788.669, 'duration': 8.425}, {'end': 800.477, 'text': 'All right, now we define the columns here.', 'start': 798.155, 'duration': 2.322}, {'end': 804.199, 'text': "By the way, I'm gonna show you two other methods and shorthand methods for doing this.", 'start': 800.577, 'duration': 3.622}, {'end': 807.561, 'text': "This is a little bit verbose as it's referred to as.", 'start': 804.359, 'duration': 3.202}, {'end': 810.363, 'text': 'We have to define the rows of this section as well.', 'start': 807.921, 'duration': 2.442}], 'summary': 'Using css properties grid column start and grid column end to target main and define columns.', 'duration': 28.147, 'max_score': 782.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ782216.jpg'}, {'end': 965.679, 'src': 'heatmap', 'start': 909.694, 'weight': 0.736, 'content': [{'end': 910.135, 'text': 'There we go.', 'start': 909.694, 'duration': 0.441}, {'end': 910.995, 'text': 'Very good.', 'start': 910.535, 'duration': 0.46}, {'end': 919.743, 'text': "So now what we can do, there's even a shorter method of defining these four values, and that's just simply using grid hyphen area.", 'start': 911.676, 'duration': 8.067}, {'end': 924.346, 'text': 'So we could say it starts with one, our grid row start.', 'start': 920.904, 'duration': 3.442}, {'end': 925.507, 'text': "That's the first column.", 'start': 924.627, 'duration': 0.88}, {'end': 929.15, 'text': 'Then it starts with grid column start.', 'start': 926.568, 'duration': 2.582}, {'end': 931.993, 'text': 'So that would be this one right here.', 'start': 929.551, 'duration': 2.442}, {'end': 941.445, 'text': 'this next one would be grid row end, which is three, and grid column end, which is three.', 'start': 933.641, 'duration': 7.804}, {'end': 946.987, 'text': "so if i delete all these, just get this a little bit more organized, we'll see.", 'start': 941.445, 'duration': 5.542}, {'end': 951.549, 'text': 'now it still works just the same freaking awesome, right, all right.', 'start': 946.987, 'duration': 4.562}, {'end': 956.371, 'text': "so now it's just a matter of doing that same process for all the other elements.", 'start': 951.549, 'duration': 4.822}, {'end': 965.679, 'text': "so if we come out here, um, let's tackle, um, the nom one, because that's the next one.", 'start': 956.371, 'duration': 9.308}], 'summary': 'Shorter method of defining grid values using grid-area, simplifies layout setup.', 'duration': 55.985, 'max_score': 909.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ909694.jpg'}], 'start': 573.129, 'title': 'Css grid layout', 'summary': 'Covers the basics of css grid layout, including defining columns and rows using fraction units and setting up the grid template columns and rows with quantifiable data. it also demonstrates the usage of css grid layout to define grid columns and rows for layout areas, with the ability to simplify the process by using shorthand methods, resulting in a more organized and efficient design.', 'chapters': [{'end': 675.865, 'start': 573.129, 'title': 'Css grid layout basics', 'summary': 'Covers the basics of css grid layout, including defining columns and rows using fraction units and setting up the grid template columns and rows with quantifiable data.', 'duration': 102.736, 'highlights': ['Defining columns and rows using fraction units The speaker explains how to define columns and rows using fraction units, with examples such as 1fr, 1.2fr, and 1.5fr for columns and 1fr, 4fr, and 2fr for rows.', 'Setting up grid template columns and rows The chapter demonstrates setting up grid template columns and rows with quantifiable data, such as 1fr, 1.2fr, 1.5fr for columns and 1fr, 4fr, 2fr for rows.', 'Understanding the basics of CSS grid layout The chapter introduces the basics of CSS grid layout, including the inspector tool, display grid property, and working with columns and rows.']}, {'end': 1046.646, 'start': 675.865, 'title': 'Css grid layout', 'summary': 'Demonstrates the usage of css grid layout to define grid columns and rows for layout areas, with the ability to simplify the process by using shorthand methods, resulting in a more organized and efficient design.', 'duration': 370.781, 'highlights': ['The chapter demonstrates defining grid columns and rows for layout areas using CSS Grid Layout, with a focus on simplifying the process using shorthand methods, resulting in a more organized and efficient design. Demonstration of defining grid columns and rows for layout areas using CSS Grid Layout; Emphasis on simplifying the process using shorthand methods; Resulting in a more organized and efficient design.', "The concept of defining grid column start and end, and grid row start and end is illustrated, with an example of defining the 'main' section starting at column 1 and ending at column 3, and starting at row 1 and ending at row 3. Illustration of defining grid column start and end, and grid row start and end; Example of defining the 'main' section starting at column 1 and ending at column 3, and starting at row 1 and ending at row 3.", 'The usage of shorthand methods for defining grid columns and rows is demonstrated, showcasing the omission of start and end properties and the inclusion of both in the main property, resulting in a simpler and more concise approach to defining layout areas. Demonstration of shorthand methods for defining grid columns and rows; Showcasing the omission of start and end properties and the inclusion of both in the main property; Resulting in a simpler and more concise approach to defining layout areas.']}], 'duration': 473.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ573129.jpg', 'highlights': ['Defining columns and rows using fraction units with examples like 1fr, 1.2fr, and 1.5fr for columns and 1fr, 4fr, and 2fr for rows.', 'Setting up grid template columns and rows with quantifiable data, such as 1fr, 1.2fr, 1.5fr for columns and 1fr, 4fr, 2fr for rows.', 'Understanding the basics of CSS grid layout, including the inspector tool, display grid property, and working with columns and rows.', 'Demonstration of defining grid columns and rows for layout areas using CSS Grid Layout, with a focus on simplifying the process using shorthand methods, resulting in a more organized and efficient design.', "Illustration of defining grid column start and end, and grid row start and end; Example of defining the 'main' section starting at column 1 and ending at column 3, and starting at row 1 and ending at row 3.", 'Demonstration of shorthand methods for defining grid columns and rows; Showcasing the omission of start and end properties and the inclusion of both in the main property; Resulting in a simpler and more concise approach to defining layout areas.']}, {'end': 1278.378, 'segs': [{'end': 1140.866, 'src': 'embed', 'start': 1046.926, 'weight': 0, 'content': [{'end': 1051.928, 'text': 'What am I doing? So again, this is the row and the column.', 'start': 1046.926, 'duration': 5.002}, {'end': 1053.048, 'text': 'This should be two.', 'start': 1052.428, 'duration': 0.62}, {'end': 1056.169, 'text': 'So now going back.', 'start': 1054.469, 'duration': 1.7}, {'end': 1057.909, 'text': 'Here we go.', 'start': 1057.449, 'duration': 0.46}, {'end': 1067.451, 'text': "Awesome So you can see right here, header is sitting and that's completely not the yum is actually showing up right here right now.", 'start': 1058.729, 'duration': 8.722}, {'end': 1069.511, 'text': "So that's the power of placing these items.", 'start': 1067.891, 'duration': 1.62}, {'end': 1071.352, 'text': "So let's do the yum section now.", 'start': 1069.591, 'duration': 1.761}, {'end': 1074.092, 'text': 'So yum.', 'start': 1072.352, 'duration': 1.74}, {'end': 1080.941, 'text': 'going to go back to our little template here.', 'start': 1075.916, 'duration': 5.025}, {'end': 1082.582, 'text': 'so yum is right here.', 'start': 1080.941, 'duration': 1.641}, {'end': 1085.946, 'text': 'so it starts on three ends at four, just the same as nom.', 'start': 1082.582, 'duration': 3.364}, {'end': 1087.667, 'text': 'so those values are going to be the same.', 'start': 1085.946, 'duration': 1.721}, {'end': 1091.451, 'text': 'but it starts at two ends, at three, in terms of the columns.', 'start': 1087.667, 'duration': 3.784}, {'end': 1095.575, 'text': 'so three, four, the same two, three.', 'start': 1091.451, 'duration': 4.124}, {'end': 1099.398, 'text': "we increase those, And let's change the background color.", 'start': 1095.575, 'duration': 3.823}, {'end': 1104.184, 'text': 'This is one that was slightly different with 202020 color code.', 'start': 1099.418, 'duration': 4.766}, {'end': 1105.766, 'text': 'So now we go back.', 'start': 1104.704, 'duration': 1.062}, {'end': 1106.767, 'text': 'There we go.', 'start': 1106.366, 'duration': 0.401}, {'end': 1107.368, 'text': 'We got that one.', 'start': 1106.787, 'duration': 0.581}, {'end': 1114.11, 'text': 'right. so next up, after that, is the diabetes section, which is under here.', 'start': 1108.286, 'duration': 5.824}, {'end': 1116.052, 'text': 'so again, uh, this starts at one.', 'start': 1114.11, 'duration': 1.942}, {'end': 1131.502, 'text': 'oh, it starts at four on the row front and then ends at five, and then it starts, uh, at one here on the column front and ends at three.', 'start': 1116.052, 'duration': 15.45}, {'end': 1135.864, 'text': 'all right, hopefully this is making sense so far.', 'start': 1132.663, 'duration': 3.201}, {'end': 1140.866, 'text': "so, um, section diabetes, let's just copy this.", 'start': 1135.864, 'duration': 5.002}], 'summary': 'Demonstration of formatting a table with specific row and column values, changing background colors, and copying sections.', 'duration': 93.94, 'max_score': 1046.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1046925.jpg'}, {'end': 1242.596, 'src': 'embed', 'start': 1180.157, 'weight': 1, 'content': [{'end': 1182.939, 'text': 'So notice how nom or diabetes down here now.', 'start': 1180.157, 'duration': 2.782}, {'end': 1185.4, 'text': 'Now we have the header and then the image.', 'start': 1183.599, 'duration': 1.801}, {'end': 1186.281, 'text': 'All right.', 'start': 1186.021, 'duration': 0.26}, {'end': 1194.707, 'text': "So the header portion is going to start at one because that's where the row and it ends at two.", 'start': 1186.301, 'duration': 8.406}, {'end': 1198.549, 'text': 'And then the column is three and then ends at four.', 'start': 1195.667, 'duration': 2.882}, {'end': 1199.95, 'text': 'All right.', 'start': 1199.57, 'duration': 0.38}, {'end': 1202.692, 'text': 'So hopefully this is all clicking now.', 'start': 1201.351, 'duration': 1.341}, {'end': 1207.108, 'text': "Again, I think there's personally an easier way that I like to use.", 'start': 1204.326, 'duration': 2.782}, {'end': 1211.452, 'text': 'So header is no background colors, just white.', 'start': 1207.949, 'duration': 3.503}, {'end': 1215.835, 'text': 'So again, it was one to two, correct? Yep.', 'start': 1212.773, 'duration': 3.062}, {'end': 1218.177, 'text': 'And then three to four.', 'start': 1217.416, 'duration': 0.761}, {'end': 1220.058, 'text': 'All right.', 'start': 1218.197, 'duration': 1.861}, {'end': 1223.541, 'text': 'So I think it was already in place anyhow, which may happen sometimes.', 'start': 1220.118, 'duration': 3.423}, {'end': 1225.122, 'text': 'But yeah, there it is.', 'start': 1224.402, 'duration': 0.72}, {'end': 1225.663, 'text': "It's up here.", 'start': 1225.182, 'duration': 0.481}, {'end': 1229.866, 'text': 'Now we define the image, which is a class of candy.', 'start': 1226.103, 'duration': 3.763}, {'end': 1232.688, 'text': 'So copy this.', 'start': 1231.027, 'duration': 1.661}, {'end': 1242.596, 'text': 'The grid area for that one final time, we starts on two for the row and ends at five.', 'start': 1233.991, 'duration': 8.605}], 'summary': 'Explaining grid layout with specific row and column values.', 'duration': 62.439, 'max_score': 1180.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1180157.jpg'}], 'start': 1046.926, 'title': 'Placing items in template and diabetes section layout', 'summary': 'Demonstrates the process of placing items in a template, showing the power of placement and includes details about the row and column numbers, as well as the color code used. it also discusses the layout and design of the diabetes section, specifying the grid areas for the header and image, with row and column details, and making adjustments for background colors and image placement.', 'chapters': [{'end': 1107.368, 'start': 1046.926, 'title': 'Placing items in template', 'summary': 'Demonstrates the process of placing items in a template, showing the power of placement and includes details about the row and column numbers, as well as the color code used.', 'duration': 60.442, 'highlights': ['The power of placing items is demonstrated, showing the yum section and its placement in the template.', 'Details about the row and column numbers are provided, explaining the values and their impact on placement.', 'The color code used for changing the background color is mentioned as 202020.']}, {'end': 1278.378, 'start': 1108.286, 'title': 'Diabetes section layout', 'summary': 'Discusses the layout and design of the diabetes section, specifying the grid areas for the header and image, with row and column details, and making adjustments for background colors and image placement.', 'duration': 170.092, 'highlights': ['The chapter discusses the layout and design of the diabetes section, specifying the grid areas for the header and image, with row and column details.', 'The header portion starts at row one and ends at row two, with column three to four.', 'The image grid area starts at row two and ends at row five, with column three to four.', 'Adjustments for background colors and image placement are made, ensuring the correct display of the diabetes section.']}], 'duration': 231.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1046925.jpg', 'highlights': ['The power of placing items is demonstrated, showing the yum section and its placement in the template.', 'Details about the row and column numbers are provided, explaining the values and their impact on placement.', 'The color code used for changing the background color is mentioned as 202020.', 'The chapter discusses the layout and design of the diabetes section, specifying the grid areas for the header and image, with row and column details.', 'The header portion starts at row one and ends at row two, with column three to four.', 'The image grid area starts at row two and ends at row five, with column three to four.', 'Adjustments for background colors and image placement are made, ensuring the correct display of the diabetes section.']}, {'end': 1568.497, 'segs': [{'end': 1387.164, 'src': 'embed', 'start': 1359.991, 'weight': 1, 'content': [{'end': 1368.717, 'text': 'so we add a grid, template, areas, property, and then we it makes it easier to visualize.', 'start': 1359.991, 'duration': 8.726}, {'end': 1375.56, 'text': 'this puts us on multiple lines here and we basically just type out that same thing.', 'start': 1368.717, 'duration': 6.843}, {'end': 1377.461, 'text': "so here's the first row.", 'start': 1375.56, 'duration': 1.901}, {'end': 1380.502, 'text': 'okay, um, in in terms of columns.', 'start': 1377.461, 'duration': 3.041}, {'end': 1383.963, 'text': 'so we have a main column, a main column.', 'start': 1380.502, 'duration': 3.461}, {'end': 1385.323, 'text': "we'll call it in a header.", 'start': 1383.963, 'duration': 1.36}, {'end': 1387.164, 'text': 'you can give these whatever names you want.', 'start': 1385.323, 'duration': 1.841}], 'summary': 'Adding grid template areas property for visualization on multiple lines.', 'duration': 27.173, 'max_score': 1359.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1359991.jpg'}, {'end': 1488.006, 'src': 'embed', 'start': 1455.805, 'weight': 2, 'content': [{'end': 1459.309, 'text': 'You can see the sections of our layout are now named.', 'start': 1455.805, 'duration': 3.504}, {'end': 1464.153, 'text': 'All right, so now all we have to do is type in main here.', 'start': 1459.549, 'duration': 4.604}, {'end': 1466.155, 'text': "Alright, so that's the grid area.", 'start': 1465.074, 'duration': 1.081}, {'end': 1468.656, 'text': "It's going to be associated with the blocks defined here.", 'start': 1466.175, 'duration': 2.481}, {'end': 1471.998, 'text': "So it's going to take two columns and two rows.", 'start': 1468.736, 'duration': 3.262}, {'end': 1476.82, 'text': "And then we're also going to, for nom, just name that nom.", 'start': 1472.898, 'duration': 3.922}, {'end': 1483.924, 'text': 'Yum Diabetes, I named footer instead.', 'start': 1478.121, 'duration': 5.803}, {'end': 1488.006, 'text': 'Header is going to be header.', 'start': 1486.265, 'duration': 1.741}], 'summary': 'Layout sections named, grid area set with 2 columns and 2 rows, and specific areas like nom, footer, and header defined.', 'duration': 32.201, 'max_score': 1455.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1455805.jpg'}, {'end': 1554.287, 'src': 'embed', 'start': 1522.371, 'weight': 0, 'content': [{'end': 1533.701, 'text': 'so if I go out to our inspector, all right, and then we we do the grid overlay option and then we display the named areas.', 'start': 1522.371, 'duration': 11.33}, {'end': 1540.187, 'text': 'there we go so footer, footer, nom, yum, main, main, main, main header, candy candy candy.', 'start': 1533.701, 'duration': 6.486}, {'end': 1553.266, 'text': 'Hopefully now you have a pretty solid grasp of the different ways that you can structure your layouts using implicit and explicit CSS grid methods.', 'start': 1541.638, 'duration': 11.628}, {'end': 1554.287, 'text': 'All right.', 'start': 1554.027, 'duration': 0.26}], 'summary': 'Demonstrated grid overlay option and named areas for layout structures using css grid methods.', 'duration': 31.916, 'max_score': 1522.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1522371.jpg'}], 'start': 1281.377, 'title': 'Css grid layout and template areas', 'summary': 'Covers setting up css grid layout with named grid areas, facilitating handling and visualization. it also explains defining grid template areas, associating grid areas with blocks, naming layout sections, and utilizing implicit and explicit css grid methods for structuring layouts.', 'chapters': [{'end': 1434.093, 'start': 1281.377, 'title': 'Css grid layout tutorial', 'summary': 'Explains the process of setting up css grid layout using named grid areas and demonstrates the visualization and naming of grid areas, enabling easier handling and visualization of the layout.', 'duration': 152.716, 'highlights': ['The chapter introduces a different way of setting up CSS grid layout by using named grid areas instead of referring to grid numbers, making it easier to handle and visualize the layout.', 'The speaker demonstrates the process of specifying HTML elements and defining grid blocks by names, providing an example of naming grid areas based on the template set up, such as main, header, candy, nom, yum, and footer.', 'The transcript also covers the addition of a grid template areas property, allowing for easier visualization and typing out the layout, with examples of naming the rows and columns based on the template.']}, {'end': 1568.497, 'start': 1434.133, 'title': 'Defining css grid template areas', 'summary': 'Explains how to define grid template areas in css, associating grid areas with blocks, naming layout sections, and utilizing implicit and explicit css grid methods, with a focus on structuring layouts using css grid.', 'duration': 134.364, 'highlights': ['The layout sections are named using grid template areas, making it easier to understand the structure of the layout.', 'Associating grid areas with blocks, defining the grid area to be associated with the blocks, with two columns and two rows.', 'Naming layout sections such as nom, yum, footer, header, and candy, and ensuring proper association with grid areas.', 'The chapter provides a comprehensive understanding of structuring layouts using implicit and explicit CSS grid methods, with good support for layout structuring.']}], 'duration': 287.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YNB-JD7iPoQ/pics/YNB-JD7iPoQ1281377.jpg', 'highlights': ['The chapter introduces a different way of setting up CSS grid layout by using named grid areas instead of referring to grid numbers, making it easier to handle and visualize the layout.', 'The layout sections are named using grid template areas, making it easier to understand the structure of the layout.', 'The speaker demonstrates the process of specifying HTML elements and defining grid blocks by names, providing an example of naming grid areas based on the template set up, such as main, header, candy, nom, yum, and footer.', 'The transcript also covers the addition of a grid template areas property, allowing for easier visualization and typing out the layout, with examples of naming the rows and columns based on the template.', 'Associating grid areas with blocks, defining the grid area to be associated with the blocks, with two columns and two rows.', 'Naming layout sections such as nom, yum, footer, header, and candy, and ensuring proper association with grid areas.', 'The chapter provides a comprehensive understanding of structuring layouts using implicit and explicit CSS grid methods, with good support for layout structuring.']}], 'highlights': ['The tutorial provides a comprehensive understanding of CSS grid layout techniques, including setting up layouts, defining columns and rows, using grid template areas, and positioning items in templates.', 'The layout has three columns and four rows, and different grid areas are defined by specifying the number of columns and rows they span.', 'The chapter covers the basic concepts of structuring CSS grid, including defining columns and rows and explicit naming of grid lines, with an overview of negative values and their usage.', 'The chapter covers the creation of necessary HTML elements based on a mockup, including a boilerplate HTML structure with an empty body tag and reference to a main CSS.', 'Defining columns and rows using fraction units with examples like 1fr, 1.2fr, and 1.5fr for columns and 1fr, 4fr, and 2fr for rows.', 'Demonstration of defining grid columns and rows for layout areas using CSS Grid Layout, with a focus on simplifying the process using shorthand methods, resulting in a more organized and efficient design.', 'The power of placing items is demonstrated, showing the yum section and its placement in the template.', 'The chapter introduces a different way of setting up CSS grid layout by using named grid areas instead of referring to grid numbers, making it easier to handle and visualize the layout.']}