27. Grid Flow Test

1. If grid-auto-flow: row (the default) had been used paragraph 2 would be to the right not below.

2. To get a layout like this you need to change to grid-auto-flow: column AND then define the number of rows

3. The number of rows tells the grid how far down to go before starting the next column.

4. If there is no number of. rows defined then the extra will just add more columns rather than adding more rows.

5. To have this done automatically you might need a script to count the number of items, divide it by 2, round up. to the nearest whole number and insert that into the row number

6. Probably easier to just use column-count: 2 instead.

7. What's nice is the fact that every grid-item is the same size.

8. Shame there's no way to target the first word (ie. the number).

9. This is not an ordered list.

10. Each box is a paragraph with the numbers placed manually

11. The parent element is set to: grid-template-columns: repeat(2, 1fr); and grid-template-rows: repeat(6, 1fr);.

12. The 1fr column width is not respected here because the <code> tags are set to white-space: no-wrap;.

  1. This side uses an ordered list <ol>.
  2. So list items are turned into grid items, rather than paragraphs.
  3. There are fewer items here: 10 instead of 12 paragraphs above.
  4. There is also less text which keeps the boxes smaller.
  5. A lot of text in one box makes all of them bigger.
  6. grid-column-gap: 45px; to allow space for the second column of list numbers.
  7. nought
  8. Saepe molestiae atque at, officia ex quisquam eos.
  9. nowt.
  10. Nada
  11. Zip.
  1. Another ordered list
  2. Set to column-count: 2;
  3. This is whole list is item 3 of a larger 2 column grid layout
  4. Lists are always a bit wierd
  5. ... with there padding and margin settings.
  6. You don't get equally sized boxes using this method.
  7. Unless the text was all equal in each item.
  8. some text
  9. some text
  10. some text
  11. some text
  12. some text
            Code to try: 
    font-stretch 	normal
    condensed
    ultra-condensed
    extra-condensed
    semi-condensed
    expanded
    semi-expanded
    extra-expanded
    ultra-expanded