Creating horizontal row leads to "parent of a 'grid-item' should be a 'grid-row'" error message.

[r-pufky]

Describe the bug

context
Creating a dropdown grid layout as such:

+------------------+
|     A            |
+------------------+
|     B    |   C   |
+------------------+

expectation
I expect adding :child-direction: row to compile succesfully without errors.

bug
The table is rendered correctly, but throws error messages during the build.

Error messages are used during document creation to ensure that the documentation is properly created (e.g. these should indicate actionable messages). There is no grid-row directive accessible in sphinx-design.

$ make docs_html
Running Sphinx v4.5.0
loading pickled environment... done
building [mo]: targets for 0 po files that are out of date
building [html]: targets for 1 source files that are out of date
updating environment: 0 added, 1 changed, 0 removed
reading sources... [100%] index                                                                                                                        
/tmp/sphinx-bug/index.rst:143: WARNING: The parent of a 'grid-item' should be a 'grid-row' [design.grid]
/tmp/sphinx-bug/index.rst:152: WARNING: The parent of a 'grid-item' should be a 'grid-row' [design.grid]
looking for now-outdated files... none found
pickling environment... done
checking consistency... done
preparing documents... done
waiting for workers...
generating indices... genindex done
writing additional pages... search done
copying static files... done
copying extra files... done
dumping search index in English (code: en)... done
dumping object inventory... done
build succeeded, 2 warnings.

The HTML pages are in /tmp/sphinx-test/html.

Here's the grid layout that is triggering this bug:

.. dropdown:: test dropdown bug
  :color: primary
  :icon: stack
  :animate: fade-in
  :class-container: sd-shadow-sm
  :open:

  .. grid:: 2 2 2 2
    :gutter: 1

    .. grid-item-card::
      :columns: 12
      :class-card: sd-border-0 sd-font-weight-bold sd-bg-light
      :margin:  0
      :padding: 0
      :shadow:  none

      A

    .. grid-item::
      :columns: 12
      :child-direction: row
      :outline:

      .. grid-item-card::
        :columns: 6
        :class-card: sd-border-1
        :margin:  0
        :padding: 0
        :shadow:  none

        B

      .. grid-item-card::
        :columns: 6
        :class-card: sd-border-1
        :margin:  0
        :padding: 0
        :shadow:  none

        C

Rendered image:

problem
No warnings/errors are required to build and push documentation. This prevents migration from sphinx-panels. There is no option to disable this warning message with sphinx-design configuration.

Reproduce the bug

Current modules:

sphinx-design==0.3.0
sphinx-rtd-theme==1.0.0

See above for RST to reproduce the issue.

List your environment

$ sphinx-build --version
sphinx-build 4.5.0

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[chrisjsewell]

Heya, grid-item-card (at the bottom) were not really made to be children of a grid-item, is this what you intended?
Is this the kinda of thinking you were after: https://getbootstrap.com/docs/3.4/css/#grid-nesting?

[r-pufky]

Never fails to submit bug and figure it out 5 minutes later. It looks like using the card directive resolves the issue. Fixed example below for future reference:

.. dropdown:: test dropdown bug
  :color: primary
  :icon: stack
  :animate: fade-in
  :class-container: sd-shadow-sm
  :open:

  .. grid:: 2 2 2 2
    :class-container: grid-row
    :gutter: 1

    .. grid-item-card::
      :columns: 12
      :class-card: sd-border-0 sd-font-weight-bold sd-bg-light
      :margin:  0
      :padding: 0
      :shadow:  none

      A

    .. grid-item::
      :columns: 12
      :child-direction: row
      :outline:

      .. card::
        :class-card: sd-border-1
        :width: 50%
        :margin:  0
        :shadow:  none

        B

      .. card::
        :class-card: sd-border-1
        :width: 50%
        :margin:  0
        :shadow:  none

        C