BCN CSS: Grids

Flex-box

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-box">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>Section 3</p></section>
	<section class="panel"><p>Section 4</p></section>
	<section class="panel"><p>Section 5</p></section>
	<section class="panel"><p>Section 6</p></section>
	<section class="panel"><p>Section 7</p></section>
	<section class="panel"><p>Section 8</p></section>
	<section class="panel"><p>Section 9</p></section>
	<section class="panel"><p>Section 10</p></section>
	<section class="panel"><p>Section 11</p></section>
	<section class="panel"><p>Section 12</p></section>
</div>

Flex-grid

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>Section 3</p></section>
	<section class="panel"><p>Section 4</p></section>
	<section class="panel"><p>Section 5</p></section>
	<section class="panel"><p>Section 6</p></section>
	<section class="panel"><p>Section 7</p></section>
	<section class="panel"><p>Section 8</p></section>
	<section class="panel"><p>Section 9</p></section>
	<section class="panel"><p>Section 10</p></section>
	<section class="panel"><p>Section 11</p></section>
	<section class="panel"><p>Section 12</p></section>
</div>

Flex-grid-1

Section 1

Section 2

Code

<div class="flex-grid-1">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-2

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-2">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-3

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-3">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-4

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-4">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-5

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-5">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-6

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-6">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-7

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-7">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-8

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-8">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-9

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-9">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-10

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-10">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>

Flex-grid-12

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Code

<div class="flex-grid-12">
	<section class="panel"><p>Section 1</p></section>
	<section class="panel"><p>Section 2</p></section>
	<section class="panel"><p>...</p></section>
</div>