It's empowering to be able to create a responsive layout without needing media queries! Exercise Challenge : create your own layout with CSS Grid The same combination of auto-fit and minmax can be used for rows. This avoids the squished columns you saw at the beginning of the chapter! However, the columns will never be less than 100px.
When downsizing the window, columns get removed one by one as content gets pushed down onto rows instead. As you keep resizing the window, the columns keep growing until the very moment when there'd potentially be space for another 100px column. Overall, you'll notice that the grid will readjust itself to add another 100px column when there's enough available space for it.
#GRID TEMPLATE COLUMNS CODE#
The result of this code is much more apparent when you visualize the code in the browser and resize the window. Each column should be a minimum of 100px wide and a maximum of 1fr wide." grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) "Repeat as many columns that will fit on a screen. The two of them are often combined together, so we'll explore them in tandem. We'll learn two new keywords in this chapter: However, CSS Grid offers flexible solutions for different screen sizes that don't involve media queries at all! With media queries, you can control how content is displayed on different screen sizes. That way, the columns aren't nearly as smushed together just for the sake of getting 6 in a row! You may be thinking back to the first part of this course, when we learned about media queries. What's far more likely is that you'll want a result like this on a mobile screen: Ideal result on mobile (enough breathing room for each column) container Result on a desktop screen (wider) Result on a mobile screen (more squished together)
For example, defining the following code means there will ALWAYS be 6 columns of content, regardless of a device's screen size. Up until now, we've talked about rigid grid definitions.
0 kommentar(er)
