课程: Level Up: CSS Layout

免费学习该课程！

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

Dynamic grid gallery

Dynamic grid gallery - CSS教程

课程: Level Up: CSS Layout

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

Dynamic grid gallery

“

(coin clicking) (bright music) - [Instructor] CSS grid is a layout in module. Meaning we draw a grid and then place items within that grid. You can see that in the demo here, I'm using the developer tools to highlight the grid and show us the grid lines and how each item is placed within those grid lines. This works well when we know how many lines and how many items we are going to place in the grid but it becomes challenging when we have an unknown number of items. In this challenge, you'll explore how to work with dynamic grids, where the columns and rows are added based on how many items are placed in the grid and how much space is available. Let me show you what I mean. Watch what happens when I reduce the width of this grid. So I'll reduced a width of the view port. Right now, we have four columns in the grid, but as I reduce the width, we'll hit a certain point where suddenly we have three columns and…

内容