How to make two columns of different widths? 600px and 200px.

[Bagunda]

Please show me how to make columns of different widths. The first (top left) column should be 600px, the second 200px.

[Rusich90]

did you try grid layout?

title: Home Assistant2
views:
  - path: default_view
    title: Grid layout
    type: custom:grid-layout
    layout:
      grid-template-columns: 600px 200px
      grid-template-rows: auto
      grid-template-areas: |
        "a b"
        "c d"
      mediaquery:
        "(max-width: 500px)":
          grid-template-columns: 100%
          grid-template-areas: |
            "a"
            "b"
            "c"
            "d"
        "(max-width: 1100px)":
          grid-template-columns: 300px 100px
          grid-template-areas: |
            "a b"
            "c d"
    cards:
      - type: entities
        entities:
          - entity: light.wb_bathroom
        title: "1"
        show_header_toggle: false
        view_layout:
          grid-area: a
      - type: entities
        entities:
          - entity: light.wb_bathroom
        title: "2"
        show_header_toggle: false
        view_layout:
          grid-area: b
      - type: entities
        entities:
          - entity: light.wb_bathroom
        title: "3"
        show_header_toggle: false
        view_layout:
          grid-area: c
      - type: entities
        entities:
          - light.wb_bathroom
          - light.wb_bathroom
          - light.wb_bathroom
        title: "4"
        show_header_toggle: false
        view_layout:
          grid-area: d