Directory

← Back

Css Grid Layout 3

Build flexible layouts of any kind with css grid (V24+)

Author

Rating

Popularity

300+

This addon allows the user to create responsive or static layouts by using the css grid API

It brings four new Layouts to Vaadin:

  • AreaLayout | Area based Layouts similar to a "Border Layout" but with areas of your choice
  • FlexibleGridLayout | Responsive grids without diving too deep into css grid
  • GridLayout | Straight forward implementation of css grid (not yet super complete). I recommend reading some css-grid documentation before starting with this. Probably also has some API issues etc.
  • FluentGridLayout | The Fluent version of GridLayout

On the first sight most of the layouts seem pretty different, but they all inherit from the GridLayout. This is due to css grid being a complex but also a powerful tool which may be used for a lot of use cases. The first two layouts are meant for two specific cases, to make the entry easier for beginners.

Samples can be found in the demo
You need help, miss a feature or found a bug? Create an issue on Github!
Note: This addon is and will not be compatible with Internet Explorer

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2023-05-10
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 20+
Browser
Browser Independent

Css Grid Layout 3 - Vaadin Add-on Directory

Build flexible layouts of any kind with css grid (V24+) Css Grid Layout 3 - Vaadin Add-on Directory

This addon allows the user to create responsive or static layouts by using the css grid API

It brings four new Layouts to Vaadin:

  • AreaLayout | Area based Layouts similar to a "Border Layout" but with areas of your choice
  • FlexibleGridLayout | Responsive grids without diving too deep into css grid
  • GridLayout | Straight forward implementation of css grid (not yet super complete). I recommend reading some css-grid documentation before starting with this. Probably also has some API issues etc.
  • FluentGridLayout | The Fluent version of GridLayout

On the first sight most of the layouts seem pretty different, but they all inherit from the GridLayout. This is due to css grid being a complex but also a powerful tool which may be used for a lot of use cases. The first two layouts are meant for two specific cases, to make the entry easier for beginners.

Samples can be found in the demo
You need help, miss a feature or found a bug? Create an issue on Github!
Note: This addon is and will not be compatible with Internet Explorer
Online