---
order: 1
title:
  zh-CN: 基础
  en-US: Basic
---

## zh-CN

一行四列布局。

## en-US

1 rows & 4 columns layout.

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `
  <div sg-container="4">
    <sg *ngFor="let i of ls; let idx = index">
      <div class="item">{{ idx + 1 }}</div>
    </sg>
  </div>`,
  styles: [
    `:host .sg__item {
      padding: 5px 0;
      text-align: center;
      border-radius: 0;
      min-height: 30px;
      margin-top: 8px;
      margin-bottom: 8px;
      color: #fff;
    }
    :host .item {
      background: #00A0E9;
      height: 120px;
      line-height: 120px;
      font-size: 13px;
    }`
  ]
})
export class DemoComponent {
  ls = Array(4).fill(0);
}
```