课程: CSS: Advanced Layouts with Grid

免费学习该课程！

今天就开通帐号，24,700 门业界名师课程任您挑！

Grid lines and units

Grid lines and units - CSS教程

课程: CSS: Advanced Layouts with Grid

开始一个月试用 购买团队方案

Grid lines and units

“

- [Instructor] Now that we've got a grid container defined in our style sheet, we can start declaring grid lines to create rows and columns. This is done using two properties called grid-template-columns and grid-template-rows. There's also a shorthand property that combines these two, called grid-template. Let's click on this to see the documentation, and just as an example, each of those properties takes a space-separated list of values, and the size values are what determine the width of columns and the height of the rows within a grid. Let's head over to Codespaces, and I'll show you what I mean. Right now, we've got our grid container, and by default, this has one column that spans the full width of the grid. We've got this grid column line one over here on the left side, and grid column line two over here on the right. Now, if I wanted to split this space into two equal width columns, we could go over into our CSS, and we'll say grid-template-columns. 50% for the first column…

内容