Two Column Grids

[Lasikiewicz]

Using code from the page
https://squidfunk.github.io/mkdocs-material/reference/grids/#list-syntax

I have created this

<div class="grid cards" markdown>

-   :material-home-floor-g:{ .lg .middle } __General__

    ---

    [:octicons-arrow-right-24: test](general/test.md)  
    [:octicons-arrow-right-24: test](general/test.md)  
    [:octicons-arrow-right-24: test](general/test.md)  
    [:octicons-arrow-right-24: test](general/test.md)  
    [:octicons-arrow-right-24: test(general/test.md)  
    [:octicons-arrow-right-24: test](general/test.md)  

There are 11 variations of this on the same page with different amounts of "Tests" and show in groups of 3 due to screen size.

Is it possible to split the grid further?
For example the above would render
-> Test -> Test
-> Test -> Test
-> Test -> Test

Inside that grid box?

[kamilkrzyskow]

Hi @Lasikiewicz,
I've read this post twice over and I can't say I understand your request. The code you've provided probably makes one grid card and renders multiple links inside. Something like this? Per Markdown rules, as single new line continues the previous paragraph.

---

And you want to make it look like this? Then try to add an empty line between the links to put them inside separate paragraphs.

---

However, I still feel like I'm missing something about your query, as you've made one grid card and added multiple links, so ultimately there is no grid, so currently you're relying on the text font size and text wrapping.
The grid elements are within the list items, so each item should go into a separate - bullet point.
Like the example here: https://squidfunk.github.io/mkdocs-material/reference/grids/#list-syntax

If you're using the grid card elements and have 3 columns instead of the wanted 2 then some custom CSS is likely required to add a limiter to 2 columns. https://squidfunk.github.io/mkdocs-material/customization/#additional-css

[Lasikiewicz]

Thanks for the reply hopefully the image above shows what I am trying to achieve.
I had to redact some info but it should make sense.

Middle block is the best example as I want to move the bottom three links to the right making the box smaller. (Obviously the box to the left would be in a row of 5 and 4 so would expand this box)

Probably some simple HTML but I'm missing it.

[Lasikiewicz]

Using a list inside the grid with float gains the desired results.

<ul style="float:left;">
  <li>[Bulletins](bulletins.md)</li>
  <li>[Common(common.md)</li>
  <li>[Link](link)</li>
  <li>[Guides](guides.md)</li>
  <li>[Flash](flash.md)</li>
</ul>
<ul style="float:left;">
  <li>[Updates](updates.md) </li>
  <li>[Remote](remote.md)</li>
  <li>[Reference](reference.md)</li>
  <li>[Troubleshooting](troubleshooting.md)</li>
</ul>