This grid-template-columns property uses the auto-fit keyword and sets the minimum width for each grid item to 200 pixels and a maximum width of 1fr (or, one fractional unit). There is actually very little code needed to make all this happen and it's all done with the grid-template-columns property in the grid container. With auto-fill, columns 5 and 6 are also created, but now they are are created with a 200 pixel minimum width and show up as blank cells at the end of the row. So, even though the cells are actually created, they don't show up. You can see this by noting the column line numbers 5, 6, and 7 at the top right. With auto-fit, columns 5 and 6 are actually created, but they are 0 pixels wide and are stacked one on top of the other. However, the way auto-fit and auto-fill handle those extra columns differs. For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex. For example, on a phone users would see content shown in a single column view a tablet might show the same content in two columns. The layout changes based on the size and capabilities of the device. Because there are only four 200 pixel wide grid items on the row, CSS Grid creates two more columns. You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. Responsive web design, originally defined by Ethan Marcotte in A List Apart, responds to the needs of the users and the devices they're using. At this particular viewport width (1,215 pixels), a total of six 200 pixel wide grid items could fit on the row. Notice the column line numbers in the illustration below.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |