HHL-UI

The grid system

The main idea in this grid system is to use the standard CSS grid by specifies named grid areas. For different screen sizes it using css variable for defining the layout

CSS TRICKS A Complete Guide to Grid
MDN Web Docs grid-template-areas
Learn CSS Grid

CSS or Component

There are 2 ways to use the grid-system.

  • Adding the CSS class gridBox.
  • Use the Vue component hhl-layout.

WARNING

You can edit the code examples.

By Class.


By Component.

WARNING

The following examples will only show the component version.

WARNING

In the code examples the hhl-layout component will have a property grid-lines this is only for showing the grids row and columns lines. Remove this property and the gridlines will disappear.

Sizing Media Queries

The system gives you the possibility to gives different values depending on the screen size. It contains 4 types of media breakpoints that are used for targeting specific screen sizes or orientations.

Value Describtion
-sm Small: 600px > < 960px
-md Medium: 960px > < 1264
-lg Large 1264 >

It can be used like this col:"auto auto" col-md:"auto auto auto auto" will gives you 4 columns for screens larger than 600px and 2 columns for smaller than 600px.

WARNING

Alwais start with row and col or the other properties and if needet add values for the other sizes.


Try to resize the window to see how it adjusting.
CSS Class: --grid-col: auto auto --grid-col-md: auto auto auto auto
Component: col="auto auto" col-md="auto auto auto auto"

Rows

You control the rows by the
CSS variable --grid-row/-sm/-md/-lg.
Component row/-sm/-md/-lg.
by default the value is auto.

Value Describtion
auto Default value. Auto adjust the size.
(??)px Sets the size of the rows, by using a legal length.
minmax(max-content, 1fr) Sets the size of each row to depend on the largest item in the row

Rows fixed size

Set the size to 100px.
CSS Class: --grid-row: 100px
Component: row="100px"

Rows max-content

Set the size to 100px.
CSS Class: --grid-row: minmax(max-content, 1fr)
Component: row="minmax(max-content, 1fr)"

Columns

You control the columns by the
CSS variable --grid-col/-sm/-md/-lg..
Component col/-sm/-md/-lg..
by default the value is auto.
The property specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.

Value Describtion
auto Default value. Auto adjust the size.
(??)px Sets the size of the column, by using a legal length.
(??)fr Sets a fraction of the available space in the grid container.

WARNING

Try to resize the window to see how the columns adjust.

auto auto auto auto

CSS Class: --grid-col: auto auto auto auto
Component: col="auto auto auto auto"

auto 1fr 1fr auto

CSS Class: --grid-col: auto 1fr 1fr auto
Component: col="auto 1fr 1fr auto"

auto 1fr 1fr 150px

CSS Class: --grid-col: auto 1fr 1fr 150px
Component: col="auto 1fr 1fr 150px"

repeat(6, 1fr)

With repeat you can make it more simpel to set the same size.

CSS Class: --grid-col: repeat(6, 1fr)
Component: col="repeat(6, 1fr)"

repeat(3, minMax(100px, 1fr))

With minMax you can specify the min size of the columns

CSS Class: --grid-col: repeat(3, minMax(100px, 1fr))
Component: col="repeat(3, minMax(100px, 1fr))"

autofit-200

With the autofit the grid will automatic add rows and columns when the space is availble. It will remove columns when the size go under the min size (200px here).

CSS Class: --grid-col: repeat(auto-fit, minMax(200px, 1fr))
Component: col="autofit-200" syntax autofit-value (0-1000) in pixel.

Gaps

You control the gap between rows and columns by the
CSS variable --gap/-sm/-md/-lg.
Component gap/-sm/-md/-lg.
The default value is 24px. Set the gap between rows and columns.

  • gap="10px" Set both rows and column gap to 10px;
  • gap="24px 10px" Set rows gap to 24px and column gap to 10px;

gap 10px

CSS Class: --grid-gap: 10px
Component: gap="10px"

gap 30px 10px

CSS Class: --grid-gap: 30px 10px
Component: gap="30px 10px"

Area

Another powerful and intuitive way to define a grid layout is to use the grid area system. You control the column and rows layout by
CSS variable --grid-area/-sm/-md/-lg. You need to add the class gridBox_autoName to use it with in the CLASS way
Component area/-sm/-md/-lg.

All the child element in the grid will get a grid-area name from c1 up to c24 in the same order as the dom.
You then define how they should be presentet in the grid like this.

  • "c1 c2 c3" "c4 c5 c6" It will give 2 rows with 3 columns.
  • "c6 c5 c4" "c3 c2 c1" It will give 2 rows with 3 columns but in the opisite order.
  • "c1 c2 ." ". c3 c4" "c5 . c6 It will give 3 rows with 3 columns with 3 empty cells, the . mean an empty cell.

The CSS way.

  <div class="gridBox gridBox_autoName demoGrid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <style>
    .demoGrid {
      --grid-area: "c1 c2 c3" "c4 c5 c6";
    }
</style>

WARNING

It is very important to remember to add the css gridBox autoName when you use the CSS way. The Component do it automatically


The Component way.

  <hhl-layout area="c1 c2 c3, c4 c5 c6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </hhl-layout>

Area "c1 c2 c3, c4 c5 c6"

CSS: --grid-area: "c1 c2 c3" "c4 c5 c6";
Component: area="c1 c2 c3, c4 c5 c6"

Area "c6 c5 c4, c3 c2 c1"

CSS: --grid-area: "c6 c5 c4" "c3 c2 c1";
Component: area="c6 c5 c4, c3 c2 c1"

Area "c1 c2 ., . c3 c4, c5 . c6"

CSS: --grid-area: "c1 c2 ." ". c3 c4" "c5 . c6";
Component: area="c1 c2 ., . c3 c4, c5 . c6"

← Grid Alignment →