About Page – 960 Grid – HTML & CSS – SitePoint Forums

I just started working on a website for my friend https://test.prygara.com/ which is based on the WordPress Underscores theme and I was wondering what would be the correct way to declare the 960 12 col grid in CSS as mentioned here https://www.wearewibble.com/grid-systems-what-are-they-a-quick-guide/?
According to the article, it looks like the grid they use can be used for both desktop and mobile designs and they use it for almost all of their projects.

We design using the 12 column grid. Just like Rule 960, but expand the container boundaries. We have even columns, just like the 960 rule, and use an even gutter. We modify this for the actual screen size we are designing for.

I currently have the grid declared as follows:

.site {
    display: grid;
    min-height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
}

and I did some row based placements but mainly used it for the sticky footer as mentioned here https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

I don’t buy into the 12 column grid system because it seems too restrictive to me and you end up with a site that looks like bootstrap or other similar frameworks. I understand that having a system in place allows for easy alignment, but rarely have I found that a strict grid matches any of the designs I’ve been given to code.

However, others swear by them, so I guess it all depends on your approach.

I would like to take a look at something like this because you can get the code and demos for a 12 color grid and adjust accordingly.

In essence, the css grid is already a grid, so all you need to know is the css grid.

Thanks for the quick response Paul and the link. I am okay. It makes sense. I guess how you declare the grid differs for each project depending on what needs to be done. I’ll come back to this later and maybe try a side project just to better understand the concept of 12 cols.

Can you take a look at the about page at the above URL? When you start resizing the page there are 2 major issues (see screenshot): navigation (not sure where to put that ham icon on smaller screens) and image alignment and text with the footer’s vertical borders. I’m a bit stuck that I don’t know the best way to handle those for small screens. I’m pretty much ok with the layout of the office.

I’ll take a look this afternoon as I’m going out this morning

Ok, I took a quick look and that’s where I would start.

Add this code at the end of testing the css file so that it can be modified easily, but once you modify it, you can integrate it correctly because it contains new rules and derogations.

#colophon {
grid-template-columns:1fr 1fr 1fr;
}
#colophon > *{
display:flex;
justify-self:center;
border-left:none;
}
.wp-block-page-list,
.wp-block-categories-list,
.wp-block-social-links {
  width: auto;
}
.wp-block-image img.wp-image-62 {
  width: 100%;
  max-width: none;
}
.home .entry-content figure,
.home .entry-content div:nth-child(2),
.home .entry-content div:nth-child(3) {
  flex: 1 0 0;
}

.home .entry-content figure {
  max-width: 500px;
  min-width: 200px;
}
@media screen and (max-width: 880px) {
  .home .entry-content {
    display: block;
  }
  .home .entry-content figure {
    max-width: none;
    min-width: 0;
    float: right;
    width: 180px;
    margin: 20px;
  }
  #colophon {
    display: flex;
    flex-direction: column;
  }
  #colophon > * {
    border-left: none;
  }
}

Your footer was too wide causing a massive scroll bar. So I changed the grid settings, then on smaller screens I centered the menus. You seemed to be trying to match the footer borders to the columns above, but that would be futile unless you had them both contained in a grid. You can’t really match things up by wiring dimensions because it’s a magic number trick that breaks easily. Therefore, I centered the footer and removed the borders and it looks much cleaner in my mind.

For your three columns I adjusted the column widths to better match the large screen, then on the small screen I floated the image to the right and let the text wrap .

You should of course continue to tweak and perhaps reduce the text size a bit for the small screen and your drop caps etc, but I’ll leave that up to you as it’s mostly tweaking.

I’ve only set up one media query to show the process, but you might need another one at smaller widths just to tweak better, but don’t overdo it because you should be able to get away with just a few media queries.

As an exercise I left the header section alone as it also needs to be rearranged, but hopefully you can figure this out on your own now that you have a start.

With my code in place, you should see a display like the following live screenshots.

Hope this helps but yell if you don’t understand anything.