To request editing rights on the Wiki, click here.

Help:Wiki University Grids - Introduction

From FamilySearch Wiki
Jump to navigation Jump to search

Limitations to Flexbox[edit | edit source]

  • Flexbox coding is really only a one dimensional program.
  • What we mean is that Flexbox is good programming back and forth on a horizontal line.
  • Programming up and down is another manner. It can be done with Flexbox, but Grids do it better and with far less lines of code.
  • To produce a table as seen below is far simpler with Grids than if you tried it with Wikitext.
ONE
TWO
THREE
FOUR


CSS Grids

<div style="display:grid; grid-template-columns:25% 25% 25% 25%>
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div>FOUR</div>
</div>

HTML

<table>
<tr>
<td style="width:25%">ONE</td>
<td style="width:25%">TWO</td>
<td style="width:25%">THREE</td>
<td style="width:25%">FOUR</td>
</tr>
</table>


  • Now there does not look like much difference between CSS Grids and Wikitext in one row, but see the difference when there are four rows in the table like so:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


CSS Grids

<div style="display:grid; grid-template-columns:20% 20% 20% 20% 20%>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>12</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>

HTML

<table>
<tr>
<td style="width:20%">1</td>
<td style="width:20%">2</td>
<td style="width:20%">3</td>
<td style="width:20%">4</td>
<td style="width:20%">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>


  • You can see are fewer lines of code.
  • You do not have to specify where rows begin.

What is CSS Grids?[edit | edit source]

  • Basically it is a CSS program to create pages without having to use floats and positioning.
  • Grid creates a grid where you specify the number of columns and rows.
  • It is the combining of items in the columns and rows which is where grids make life a lot easier.
  • It will allow you to, for example, create a box spanning horizontal rows and vertical columns with two lines of code.

How to create the above format[edit | edit source]

Create Grid container[edit | edit source]

  • As with Flexbox, you need to create the overall container for the individual boxes of the above table.
  • This is the first line of coding:

<div style="display:grid; grid-template-columns:auto auto auto auto auto auto">

</div>

    • display:grid - instead of "display:flex" as with Flexbox, we enter "display:grid."
    • grid-template-columns:auto auto auto auto auto auto - this entry defines the number of columns we want in our table.
      • You can also use percentages and pixels. You can even mix them up. You can one of two columns in percentages and the other in pixels.
      • You can vary the percentages or amount of pixels; for example: 10% 30% 200px 40% 50px.
  • It is between the opening and closing div tags we will enter the coding for the individual boxes as we do for Flexbox.