![]() Note: when columns are defined using % values, they’ll use exactly those values and add any grid-gap on top. And we don’t even need the grid-template-rows declaration because the auto value is assigned as default anyway. This states “repeat 33.33% three times” giving us three columns. Let’s write this is a neater way, using the repeat() function: grid-template-columns: repeat(3, 33.33%) grid-gap will accept fixed or flexible units, which means we can perfectly combine fluid columns and fixed gutters without any complex calculations on our part. You’ll notice that the column widths now add up to 100% our gutters will be subtracted from them automatically. Hmm, that’s a bit messy, but it sort of does the job. In this case we’re going to change our pixel units for percentages. Or even more unusual units like vh and vmin. It’s quite possible to use other units here too, such as ems, or rems for example. If you recall, we were defining our grid with static pixel measurements: grid-template-columns: 150px 150px 150px The whole point of Grid is to enable us to properly control layout on the web, so let’s make our static grid fluid before we go any further. We’ll improve the way we define our gutters, explore flexible layouts, the fr unit, and introduce the repeat() function. …and that’s it! Single columns are quite simple, but things will get more complex in a hurry as we add more columns over the next few tutorials.In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to look further into Grid. ![]() As you can see the #header and #footer spread out a bit on wider screens, but the #primary div never stretches out past 650px and remains centered. wrap div is already providing the padding we need. We don’t need to add the padding, because the padding from the. Once again, we set a margin of “0 auto” to center the content when necessary. We use max-width instead of width so that the div simply fills the screen width on smaller devices, instead of requiring horizontal scrolling. It is more difficult to read longer lines of text, so we don’t want our main content to ever get wider than 650px. Here’s what it should look like on mobile. ![]() ![]() Finally we add a 1em padding to the divs, so none of the content will be touching the edges of the screen on small devices. Setting the margin to “0 auto” assures us that there will be no margin above or below the divs, but if the screen is wider than 1200px, the horizontal margins will be equal, which will center the div. wrap divs will simply fill the entire width of the screen. On any device smaller than 1200px wide, the. wrap divs get a max-width of 1200px so on really large screens they don’t get too spread out. Now that we can see what we’re working with, we’ll set up the structure. First let’s add a little bit of color so we can tell the difference between the #header, #main, and #footer divs. We can simply use a fluid width layout that will account for all devices. For a single column layout we don’t need media queries. Actually, we’ll only start doing that once we add more columns to our layout. */įollowing the mobile first development philosophy, we’ll start with mobile styles and then add styles for tablets and then the full desktop styles using media queries. We just need to set all elements to use the “border-box” box model, remove the top margin from all elements, and remove all margin/padding from a few specific elements. We don’t need much of a reset for what we’re doing here. In future tutorials we will include #secondary and #tertiary divs to hold the sidebars. Also note the #primary div that will hold the actual page content. That’s about all we need to understand for now. As you can see, there is a #page div that contains the #header, #main, and #footer divs. I’ve tried to keep everything as simple and familiar as possible, while at the same time allowing for (almost) any layout to be achieved. This is very similar to the structure of the _s theme by Automattic as well as the Genesis Framework and the upcoming StartBox theme. For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.īefore I write about the CSS, I want to show a simplified version of HTML that is displayed by the Solum theme. I will not be including menus in these tutorials.Solum doesn’t contain any layout markup, so it gives a clean starting point. The HTML structure will be coming from the Solum starter theme I released last week.There are just a few things I want to mention before getting started: It’s pretty simple, but I’ll move on to more complex layouts in the next posts. In this post, I will be covering how to easily put together a single column layout. This is the first in a series of posts detailing how to setup basic responsive page structures using CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |