Description

Design grid system based on Ant Design.

Outline

In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.

Following is a brief look at how it works:

• Establish a set of column in the horizontal space defined by row (abbreviated col)
• Your content elements should be placed directly in the col, and only col should be placed directly in row
• The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by <div lui-col [luiSpan]="8" />.
• If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.

Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.

Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.

Breakpoints

By default, the grid system will use the default Tailwind breakpoints.
If you didn't changed your breakpoints, the grid system will use the following breakpoints (in pixels, min width for each breakpoint):

const breakpoints = {
  'sm': 640,
  'md': 768,
  'lg': 1024,
  'xl': 1280,
  '2xl': 1536,
};

If you changed your tailwind breakpoints, you can tell the library to use your breakpoints by providing the breakpoints property in the global configuration.
Here is an example of how to provide your breakpoints:

import { LuiConfig, LuiConfigService, provideLuiConfig } from '@lqvrent-workspace/lqvrent-ui/core/config';

const config: LuiConfig = {
  breakpoints: {
    'sm': 640,
    'md': 768,
    'lg': 1024,
    'xl': 1280,
    '2xl': 1536,
  },
  // ...
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    // ...
  ],
  providers: [
    provideLuiConfig(config),
  ],
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor() { }
}

API

import { LuiGridModule } from '@lqvrent-workspace/lqvrent-ui/grid';

<div lui-row>
  <div lui-col luiSpan="12">50%</div>
  <div lui-col luiSpan="12">50%</div>
</div>

More examples