Juixe Techknow

I’ve used a variety of layout techniques and technologies, from HTML tables to home grown CSS. I recently started using The 1Kb CSS Grid to layout my web content in a page. With The 1Kb CSS Grid you can specially design your grid CSS by selecting the number of columns, the column width and the gutter width between columns. The width of your grid will be calculated for you but just in case you care, the total width of the grid will be based on the following equation: (Number of Columns x Column Width) + (Number of Columns – 1) * Gutter With

1Kb CSS Grid

For my requirements I found when using The 1Kb CSS Grid that I tend to get more flexibility when I use 12 columns at 60 pixel wide each column and a gutter of only 10 pixels. The total grid width for this layout is 840px. If you peek in the generated grid.css you will find, with our configuration, 12 grid classes, such as grid_1, grid_2, etc. Think of grid_1 as a single column, and grid_2 as a one cell that spans two columns. You can have any number of rows, but each row you only have 12 columns. For example, you can have one grid_12, or three grid_4, or 12 grid_1 per row. Lets see the HTML for a few rows and how they would end up looking.

<div class="row">
  <div class="column grid_12">12</div>
</div>
<div class="row">
  <div class="column grid_6">6</div>
  <div class="column grid_6">6</div>
</div>
<div class="row">
  <div class="column grid_1">1</div>
  <div class="column grid_2">2</div>
  <div class="column grid_4">4</div>
  <div class="column grid_5">5</div>
</div>

Basic Grid Layout

Notice that each row can have any number of grids, as long as the grid count adds up to 12. You can also nest rows

<div class="row">
  <div class="column grid_8">8
    <div class="row">
      <div class="column grid_4">4</div>
      <div class="column grid_4">4</div>
    </div>
  </div>
  <div class="column grid_4">4</div>
</div>

As a tip, just remember that the grid count in the nested row must add up to the parent/containing column grid count. Below is a dramatization of what a CSS grid row with a nested row would look like.