About page - 960 grid

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

We design using the 12 column grid. Just like the 960 rule, but expand the boundaries of the container. We have even columns, just like the 960 rule, and use an even gutter. We alter this for the actual screen size we design 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 line based placements but mainly used it for 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 col grid system as 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 I have rarely found that a strict grid has matched any of the designs that I’ve been given to code.:slight_smile:

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

I would take a look at something like this as you can get the code and demos for a 12 col grid and adjust to suit.

In essence css grid is already a grid so all you need to know is css grid. :slight_smile:

2 Likes

Thanks for quick response Paul and the link. I agree. It makes sense.I guess how you declare grid would differ for every project depending on what needs to be done. I will go through it later and may be try on a side project just to gain a better understanding of the concept of 12 col.

Can you take a look at about page at above URL ? When you start resizing the page there’s 2 major issues (see screenshot) : navigation (I am not sure where to place that ham icon on smaller screens) and image and text alignment with the footer vertical borders. I am a bit stuck in that I am not sure what is the best way to handle those for smaller screens. I am pretty much OK with desktop layout.

I’ll take a look this afternoon as I am out this morning :slight_smile:

Ok, I’ve had a quick look and this is where I would start.

Add this code at the end of the css file testing so it can be changed easily but once you have tweaked it you can integrate it properly as it contains new rules and over-rides.

#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 miles too wide and causing a massive scrollbar so I changed the grid settings and then on smaller screens I centred the menus. You seemed to be trying to match the borders of the footer with 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 hardwiring dimensions as that is a magic number trick that breaks easily. Therefore I centred the footer and removed the borders and it looks much cleaner in my mind.

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

You should of course continue to tweak and perhaps reduce text size slightly for the smaller screen and your drop caps etc but I leave that for you to do as it is mainly tweaking.

I have only put one media query in place to show the process but you may need one more at smaller widths just to tweak better but don’t overdo it as you should be able to get away with just a few media queries.

As an exercise I have left the header section alone as that also needs re-ordering but hopefully you will be able to work that out for yourself now that you have a start. :slight_smile:

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




Hope that helps but shout if you don’t understand anything.

Exactly. I did try the grid before though but was not able to figure out how to have an image, two columns and those vertical borders in the footer (the ones you removed) vertically aligned. And then there was an issue with the column that sits next to the image - on resize for smaller screens there forms an empty space (doesn’t look good to me design wise) under the image when using a grid. Let me try to work with your version and see.

You would need a structure like this to have rows that work together automatically…

Thanks Paul. I will take a look later. I am thinking may be instead of floating an image just stack the image followed by text of two columns with horizontal border between those {in that case there would be no white space under the image on smaller screens). Let me try if I can achieve this myself based on your suggestions.

1 Like