Week 7
Week 7...again. For some reason, I just lost this whole post. That was fun. Today we're going to be taking a round three jab at grids. We'll be going over how different types of grids work in responsive designs. In the idealized setting we'd just have the traditional grid. With this grid, the gutters and the column sizes stay the same. What happens is the number of columns change. So, say you have two cards sitting on three columns each on a webpage. If you were to look at that on a tablet then you would essentially wrap the two columns that don't fit the width of the tablet. Which would lead to stacking your cards. But, in real life, your grids have to be more flexible than that due to the reality that we can resize our browsers within desktops. In comes the fixed and the fluid grids.
With fluid grids, everything changes in a dynamic manner. Your layout shrinks (or stretches) relative to each other as the browser changes size. Until, that is, you get to a specific break point that you designed, at which point, the layout will change. Say you had a large photo field element with three smaller photos underneath. You designed it to be full screen, as you shrink the browser, those photos will shrink relative to each other. Until, bam, the large photo becomes the same size as the ones underneath it and the four photos stack on top of each other.
With fixed grids, your field elements stay the same size. Which, sadly, does mean some of your field elements are at risk to get cut off as you try to get to the next break point. So, what does change in this type of grid, you might be asking. Your margins. As things shrink, your margins will first take the hit until your poor field elements do. Once you hit that breakpoint though, you have the chance to re-arrange everything so that sits nice again.
Also common are hybrid grids. Yes, they do exactly what you think they do. You apply different behaviors of fluid and fixed grids to different field elements on your screen. More complicated to code but also probably the best of both worlds. And there you have it. This is the final post on grids, for now.
With fluid grids, everything changes in a dynamic manner. Your layout shrinks (or stretches) relative to each other as the browser changes size. Until, that is, you get to a specific break point that you designed, at which point, the layout will change. Say you had a large photo field element with three smaller photos underneath. You designed it to be full screen, as you shrink the browser, those photos will shrink relative to each other. Until, bam, the large photo becomes the same size as the ones underneath it and the four photos stack on top of each other.
With fixed grids, your field elements stay the same size. Which, sadly, does mean some of your field elements are at risk to get cut off as you try to get to the next break point. So, what does change in this type of grid, you might be asking. Your margins. As things shrink, your margins will first take the hit until your poor field elements do. Once you hit that breakpoint though, you have the chance to re-arrange everything so that sits nice again.
Also common are hybrid grids. Yes, they do exactly what you think they do. You apply different behaviors of fluid and fixed grids to different field elements on your screen. More complicated to code but also probably the best of both worlds. And there you have it. This is the final post on grids, for now.
Comments
Post a Comment