How to build a grid as shown on the getdoks.org page

[zhangineer2]

How do I build a grid like the one in the screenshot ?

[h-enk]

Thanks for asking! I will make this part of the upcoming release of Doks core: thuliteio/doks-core#117

Until then you'll have to add a custom card shortcode and use it like so:

{{< card-grid >}}
{{< card title="Learn Doks" icon="outline/book" color="yellow" >}}

- [Project structure](/docs/basics/project-structure/)
- [Configuration](/docs/basics/configuration/)
- [Deploy](https://docs.thulite.io/guides/deploy/)

{{< /card >}}
{{< card title="Extend Doks" icon="outline/puzzle" color="purple" >}}

- [Analytics](https://docs.thulite.io/guides/analytics/)
- [CMS](https://docs.thulite.io/guides/cms/)
- [DocSearch](/docs/recipes/docsearch/)

{{< /card >}}
{{< /card-grid >}}

{{< card-grid >}}
{{< card title="What's going on?" icon="outline/info-circle" color="green" >}}

- [Roadmap 2024](https://github.com/orgs/thuliteio/discussions/462)
- [Discussions](https://github.com/thuliteio/doks/discussions)
- [Blog](/blog/)

{{< /card >}}
{{< card title="Other docs" icon="outline/books" color="red" >}}

- [Thulite](https://docs.thulite.io/)
- [Images](https://images.thulite.io/)
- [SEO](https://seo.thulite.io/)

{{< /card >}}
{{< /card-grid >}}

[zhangineer2]

Thank you for the solution, @h-enk , I have a follow up question

the coloring isn't working for me and the format seems a bit off, I basically pasted the short-code to the index.md page for the front page

[h-enk]

Ah, yes. You need to add to your common/_custom.scss the following: https://github.com/thuliteio/getdoks.org/blob/main/assets/scss/common/_custom.scss#L349-L435

[zhangineer2]

Thank you for your help @h-enk !!

One last question, is there an easy way to make the content section wider ? I have lots of empty space when viewing on the computer screen

[h-enk]

See #933 (reply in thread)

[zhangineer2]

thank you for your reply. Mine is already set to "fluid". I think maybe it's just because of my desktop is a wide screen and that's the max it'll go. thanks