<commit_before>## Grids

> Note: the old `.row` and `.grid` have been replaced by the new `.flex`. You can still [see the old documentation in github](https://github.com/picnicss/picnic/blob/dcf3410125a861b3bf58ebfd06f73916ef9ae3db/src/plugins/grid/readme.md).

> Note 2: the children `<span>` are only for display purposes; you can put anything you want instead of them

A flexbox grid implementation with breakpoints. Choose when to change your layout depending on your content instead of the device you want to show as recommended by [Google's RWD](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints), by [Smashing Magazine's Logical Breakpoints](https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/) and Picnic CSS.



You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:

```html
<div class="flex two four-500 six-800 demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div class="full half-500 third-800"><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
  <div><span>7</span></div>
  <div><span>8</span></div>
  <div><span>9</span></div>
  <div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
</div>
```


### Equaly sized columns

Let's start through the basics though. Just a container with equally sized children:

```html
<div class="flex demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
</div>
```

With the class `flex`, smaller children will be spaced equally to fill all of the content. However, this only works with small children. If you have children bigger than their corresponding width (1/6th in the above) they will not be restricted:

```html
<div class="flex demo">
  <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
  <div><span>2</span></div>
</div>
```

To fix this, manually set the number of columns as explained in the next point.


### Column count

If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:

```html
<div class="flex three demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
</div>
```


The columns will keep being equaly spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:
<commit_msg>Correct equaly to equally<commit_after>## Grids

> Note: the old `.row` and `.grid` have been replaced by the new `.flex`. You can still [see the old documentation in github](https://github.com/picnicss/picnic/blob/dcf3410125a861b3bf58ebfd06f73916ef9ae3db/src/plugins/grid/readme.md).

> Note 2: the children `<span>` are only for display purposes; you can put anything you want instead of them

A flexbox grid implementation with breakpoints. Choose when to change your layout depending on your content instead of the device you want to show as recommended by [Google's RWD](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints), by [Smashing Magazine's Logical Breakpoints](https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/) and Picnic CSS.



You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:

```html
<div class="flex two four-500 six-800 demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div class="full half-500 third-800"><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
  <div><span>7</span></div>
  <div><span>8</span></div>
  <div><span>9</span></div>
  <div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
</div>
```


### Equally sized columns

Let's start through the basics though. Just a container with equally sized children:

```html
<div class="flex demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
</div>
```

With the class `flex`, smaller children will be spaced equally to fill all of the content. However, this only works with small children. If you have children bigger than their corresponding width (1/6th in the above) they will not be restricted:

```html
<div class="flex demo">
  <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
  <div><span>2</span></div>
</div>
```

To fix this, manually set the number of columns as explained in the next point.


### Column count

If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:

```html
<div class="flex three demo">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
</div>
```


The columns will keep being equally spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:

{'fraction_non_alphanumeric': 0.1521897810218978, 'fraction_numerical': 0.026277372262773723, 'mean_word_length': 4.638888888888889, 'pattern_counts': {'":': 0, '<': 205, '<?xml version=': 0, '>': 209, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6929651', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1755, 'n_words': 599}