User:Lakelimbo/Grid

How does the grid system works?

With authorization from Tacopill, I inserted a simplified version of the flex-column system used on Bootstrap, intended to be responsive and makes layout creations easier, so we can also avoid using tables all the time.

Rows and columns

Imagine the main content of the page (here) is a container, where you can divide it into 12 equal rows. With these rows, we can also define that the content on each row will span X rows on small, medium and/or large screens. Try resizing the screen and see the magic. :)

.col-sm-12
Will fill 12 columns on any screen

.col-sm-6
Will fill 6 columns on any screen

.col-sm-6
Will fill 6 columns on any screen

col-sm-12 col-md-6 col-lg-3
Will fill 12 columns on small screens, 6 on medium screens and 3 on large screens.

Syntax

The syntax is .col-{SIZE}-{ROWS}, where:

1. {SIZE} refers to the screen size.
   • sm for small screens or any size above 576px.
   • md for medium screens or any size above 768px.
   • lg for larger screens or any size above 992px.
   • So if you just want to create a column that span the 12 rows on any size of the screen, use sm.
2. {ROWS} refers to the total of rows mentioned (12).
   • If the main content is a container (as mentioned), each time you create a div with .row, it's also interpreted as a container, so this small container also has 12 equal rows that can be divided into more columns.

Example 1: .col-sm-12

Will fill 12 columns on any screen

Example 2: .col-sm-12 with .col-md-6

Will fill 12 columns on small screens, 6 (half) on medium screens

Will fill 12 columns on small screens, 6 (half) on medium screens

Example 3: .col-sm-12 with .col-lg-4

Will fill 12 columns on small and medium screens, 4 on large screens

Will fill 12 columns on small and medium screens, 4 on large screens

Will fill 12 columns on small and medium screens, 4 on large screens

Each column needs to be inside a .row. This element defines some the flexibility of the display and adjusts some alignments.

<div class="row"> <!-- the row -->

<div class="col-sm-12 col-md-6 col-lg-4">CONTENT</div>
<div class="col-sm-12 col-md-6 col-lg-4">CONTENT</div>
<div class="col-sm-12 col-md-6 col-lg-4">CONTENT</div>

</div>

If you think the elements on .row are way too close (without margin), add style="gap: {VALUE}px".

Float

It's also possible to define that an element will have float in one of the screen sizes mentioned. The syntax is float-{SIZE}-{POSITION}:

• {SIZE} is one of the mentioned sizes previously
• {POSITION} is right, left, or none

Example: .float-md-right. See that this image on the right only floats to the position if the screen is larger than 768px.

File:Ishikawa page 1.jpg

Bottom text

Compatibility notes

• Very old browsers will probably not work with the grid (obviously).
  • Mini browsers too, but I hardly imagine anyone uses that nowadays.