课程: CSS: Advanced Layouts with Grid

免费学习该课程！

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

Define the primary grid layout

Define the primary grid layout - CSS教程

课程: CSS: Advanced Layouts with Grid

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

Define the primary grid layout

“

- [Instructor] The first thing I want to do is create the primary grid that will hold this intro and this gallery section. If I put my browser into responsive mode, I know that at some point I want this to start as a single column layout, and then once we get to a larger viewport width, we'll bump up to two columns so that the intro will sit in the first column and the gallery will sit in the second. So I want to define my grid on this main element with a class of main area. Let's go ahead and do that. Coming into our style sheet here, we've already got a rule defined for main area, so we'll just add to this. Let's add a comment that this will be our primary grid, and then we'll just say display grid. Let's go ahead and start with a gap of 1em. Now I know I want my default or fallback layout to be a single column, so I'll go ahead and define my grid template columns as a single column, sized at 1fr. And I also know at some point that we want to redefine this grid to have two columns…

内容