Skip to content

Add support for grid gutters to control spacing between grid items#693

Open
agriyakhetarpal wants to merge 10 commits intoscientific-python:mainfrom
agriyakhetarpal:feat/grid-gutter
Open

Add support for grid gutters to control spacing between grid items#693
agriyakhetarpal wants to merge 10 commits intoscientific-python:mainfrom
agriyakhetarpal:feat/grid-gutter

Conversation

@agriyakhetarpal
Copy link
Copy Markdown
Member

This PR closes #596. This was already supported in our sphinx-design CSS, just that we didn't expose it as a parameter in the grid shortcode, so it was partially implemented (no pun intended :P).

The spacing scale formula is defined here:

$spacer: 1rem;
$spacings: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;

which generates the responsive sd-g-* classes that control the --sd-gutter-x and --sd-gutter-y variables.

The gutter parameter can either take one or four integers between 0 to 5. The default is 2 for backwards compatibility. The four integers in the value, if set, correspond to the xs/sm/md/lg breakpoints. See the Bootstrap docs for more, which is what sphinx-design relies on: https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

@agriyakhetarpal agriyakhetarpal added this to the 0.23 milestone Jan 1, 2026
@agriyakhetarpal agriyakhetarpal added the type: Enhancement New feature or request label Jan 1, 2026
@netlify
Copy link
Copy Markdown

netlify bot commented Jan 1, 2026

Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit c2d0c65
🔍 Latest deploy log https://app.netlify.com/projects/scientific-python-hugo-theme/deploys/698bf4fe9bedc400089f41a0
😎 Deploy Preview https://deploy-preview-693--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 94
Accessibility: 97
Best Practices: 100
SEO: 91
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@agriyakhetarpal
Copy link
Copy Markdown
Member Author

The deployment failure is just the link checker plugin. This has been ready for review; sites are building fine!

Copy link
Copy Markdown
Member

@stefanv stefanv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two small comments, but also OK to just merge this directly.

Comment thread layouts/partials/_elements/grid.html
Comment thread layouts/shortcodes/grid.html Outdated
@agriyakhetarpal agriyakhetarpal enabled auto-merge (squash) February 11, 2026 03:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: Enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improved grid functionality

2 participants