{
  "$type": "site.standard.document",
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreif3nanr7gcvta723mmi7bxn7roo2ads7m5x5ws2biffnpujjdv3mu"
    },
    "mimeType": "image/png",
    "size": 144080
  },
  "description": "A simple percentage-based CSS grid system that makes responsive design math easy",
  "path": "/writing/a-simpler-responsive-grid/",
  "publishedAt": "2012-06-05T00:00:00.000Z",
  "site": "at://did:plc:aes3lokiqtv63fk62nwnjeuf/site.standard.publication/3mnin5cnq2q2a",
  "tags": [
    "css",
    "responsive",
    "grid",
    "design"
  ],
  "textContent": "After making use of various complicated CSS grid systems, I've been using a simple percentage-based grid for the last year or so. It's based on a 1000 pixel wide container with 63 pixel columns and 20 pixel gutters. The outside gutters at the extreme left/right are 12 pixels to produce a nice round number. By using a 1000 pixel wide container, the maths is easy when using percentages. each column is 6.3%, gutters are 2% and so on… By setting a width on the container of 100% and a max-width of 1000 pixels, and thereafter using percentages for all widths, everything resizes nicely: I've knocked together a quick example page (code) that shows the columns. One problem with percentage-based widths is that because of the box model, any borders or padding will be added onto outside of the box. Obviously this can be a drama if you're using pixels to declare your borders and padding. The easy solution to this is the box-sizing property: Although this property isn't supported in IE7 and below, it's a useful way to control the box model and make responsive design easier.",
  "title": "A Simpler Responsive Grid"
}