CSS Grid Form Examples
These examples use various grid settings to display the cards in a different way.
Basic auto-placement example
Basic example of using the implicit grid to automatically accomodate the form elements as required.
Auto-placement with bigger form
Uses more form elements to demonstrate the same concept of auto-placement.
Auto-placement with span
In this example, the comment box is placed into a third column and spans 3 rows.
Basic explicit-placement example
Here we use the "ASCII art" syntax to lay out the form explicitly.
Basic explicit-placement example 2
Here we use the same form as above, except we simply swap the columns around. This is done by simply swapping the two strings in the ASCII art.
Explicit-placement on larger form
Here we add more form elements and explicitly place them on the form. Each section can be moved around by simply rearranging the ASCII art.