An improvement that I think can be made here is to handle any text wrapping. Mostly just small style changes to make the title text and subtitle text stand out from each other. There isn’t anything else too complicated going on in the remaining two selectors. There are probably more than a few ways to ensure their heights match, and this one is a little redundant but it does the job. I also define the height of the text square, which should match the height of the image square. It’ll center the text vertically and horizontally. The same is true here for the text_square selector. I don’t have to think about it, it just works. I try to use it for that purpose as much as possible. wrapper įlexbox makes centering things easy. Otherwise, the content can feel squished. On small screens I inherently don’t have a lot of real estate to work with when it comes to the width, so I try not to add too much space on the sides. Here I’ve set the max-width value to 950px, so any screen size that has a width less than that won’t have any white space on the sides. The entire purpose of this is to center the grid container on the page and to add white space on both sides of it.īut, there won’t always be white space on either side, depending on the screen size. The wrapper is where I’ll set the max-width and the auto-margins. This can be done directly on the grid selector, but I find it easier to work with if I have an outer div where I control the spacing. The reason for the outer parent wrapper is because I want to be able to control the width of the entire grid and the space around it. The entire responsive grid squares element is going to consist of a parent div that acts as a wrapper, and a child div that contains the grid and grid items. Using auto-fit or even auto-fill is the key to making a css grid responsive, but they can sometimes take on a mind of their own if you’re not careful. I want it to at most have two columns on the largest of screens. The tricky part will be making sure that auto-fit doesn’t go wild and start adding more columns. This responsive grid will be a single column with six rows on small screens making it mobile friendly, and change to two columns with three rows for larger screens. This term is becoming a little buzzwordy in my opinion, but I have to say that dealing with the small screen layout first somehow does make things easier later on. Lately, my preference is to take a “mobile first” approach to my designs. They’re typically trying to tell the user how awesome the product is and why they should use it. This kind of element is common for web application landing pages. What I’m building is a grid comprised of squares where their contents alternate between an image and some text. It’ll use css grid with auto-fit to accomplish this. My goal is to create a half decent element that’s responsive without media query usage. Building on my last post about responsive grids using auto-fit, I thought it’d be a good idea to actually build something useful using auto-fit.
0 Comments
Leave a Reply. |