www/docs/A0-grid.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

---
title: Grid
url: ./grid/
---

# Grid

To create a CSS Grid-based layout in missing.css, use the <dfn>`.grid`</dfn> class.

By default, the grid will have equal-width columns but uneven rows.
To override these, you have the <dfn>`.grid-even-rows`</dfn> and <dfn>`.grid-variable-cols`</dfn> classes.

To specify the row and column an element should occupy, use the `data-cols` and `data-rows` attributes:

`data-cols="1"`
: Element will take up first column, next available row

`data-cols="1 3"`
: Element will take up columns 1 to 3 (both 1 and 3 included), next available row

`data-cols="1 3" data-rows="2 3"`
: Element will take up a 3&times;2 space, with a 1 column gap above

Note that our column specifications are based on _rows_, not _lines_.
This means `data-cols="1 2"` spans two columns,
as opposed to `grid-column: 1 / 2` which spans only one.
{.box .warn}

We support columns up to 12.

To change the layout based on viewport size,
add `@s` (small, &le;768px) or `@l` (large, &ge;1024px) to the end of the attributes:

`data-cols@s="1" data-cols="1 2" data-cols@l="1 3"`
: Element will take 1 column in small screens,
  2 columns on medium screens and 3 on large screens

<figure>

  ~~~ html
  <div class="grid grid-even-rows">
    <div class="box info" data-cols="1 2" data-rows="1 2">Sidebar  </div>
    <div class="box info" data-cols="3 5" data-rows="1 3">Main     </div>
    <div class="box info" data-cols="6" data-rows="2" data-cols@s="3 5" data-rows@s="4">Aux</div>
  </div>
  ~~~

  <div class="grid grid-even-rows">
    <div class="box info" data-cols="1 2" data-rows="1 2">Sidebar  </div>
    <div class="box info" data-cols="3 5" data-rows="1 3">Main     </div>
    <div class="box info" data-cols="6" data-rows="2" data-cols@s="3 5" data-rows@s="4">Aux</div>
  </div>

</figure>