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 take a look at something like this as you can get the code and demos for a 12 color grid and adjust them 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 agree. 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 kind of stuck that I don’t know what the best way to handle these is for smaller 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 edited easily, but once you edit it, you can integrate it properly because it contains new rules and overrides.

#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.

Exactly. I’ve tried grid before though, but couldn’t figure out how to vertically align an image, two columns, and those vertical borders in the footer (the ones you removed). And then there was a problem with the column that is next to the image – when resizing for smaller screens, a blank space is formed (this does not look good to me from a design point of view ) below 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 lines running together automatically…

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

Hi Paul,
Can you take a look at the screenshot of the post #3 ? I tried drawing a blue arrow from the second column pointing to white space below the image that forms on smaller screen sizes. What I’m trying to achieve is that the text gradually flows under the image when resizing to close that white space.
The current HTML structure is

		


...

...
     

I don’t know if this is possible with the HTML structure above. I tried to wrap figure in div then float an image to the left so that the text flows under the image but that doesn’t seem like a good idea…

...
     

The only way that can happen is if the figure and the column are side by side and not direct children of a grid or flexbox. You would then float the figure and the next div will wrap automatically. You would need a structure like this.

  

    

    
...
  
  
  
...

I just quickly forked my original codepen to show the structure but didn’t take much care

Hi Paul,

This is where I am now with the menu. Please see the screenshot below and the code is here https://test.prygara.com/. I took the original code from https://alvarotrigo.com/blog/hamburger-menu-css/.

Should I rearrange the HTML as you mentioned?

Can I make the menu push content down?

You don’t want to do this because it will create a horrible user experience and cause a whole page re-flow which on small mobile will look very bad. You want the menu to slide over the content and it will do that much easier than if you push all the content down at once, because the mobile will have to redraw all the content on that page.

If you have to, you can make it push the content down by putting the menu back in the flow and changing position:absolute to position:relative in .menu. There would be other adjustments needed as you will need to reposition the burger and store a few other things. However, as I mentioned above, this is not good user design for mobile.

This code is invalid because you can’t nest a div inside a label and I wouldn’t trust anyone who did it Change the div to span and set its display: to block and it will be valid.

You have conflicts in your header that I won’t give specific answers to since I’m on vacation

First, .site-header is a flex container and only has 2 direct children that will be flex items. (site branding and site navigation). These are side-by-side elements, so the site navigation cannot be 100% wide on the small screen. I would remove position:relative and width:100% from .main-navigation and then your burger would fall back into place.

Then you can absolutely place the .menu top:100% when you also add position:relative to .site-header. This keeps the menu always at the bottom of the header. No magic number is needed.

Also note that you should hide the navigation when displaying the hamburger. At the moment everything is squashed into a single line. You need to hide in the media query and then show it with js when clicked (toggle a class).

The click area on the burger is very small, so you should see if you missed something or if the burger is under another element background. It seems to me that the rows are pulled out of the container and they don’t react properly to a click.

Give the hamburger a higher z-index for the positioned element.

Sorry I can’t give complete answers, but I’m vacationing on a very old and slow computer.

I understand. I will try to adapt based on your suggestions and post updates here. Thanks.

…ok…didn’t notice that in the markup. label is inline and div is at block level…