# Cockpit Grid: using 1/3 and 2/3 Columns

**URL:** <https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721>\
**Category:** Support\
**Created:** [November 24, 2020, 9:57am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721 "2020-11-24T09:57:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nino1337](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/nino1337/32/701_2.png) [@nino1337](https://discourse.getcockpit.com/u/nino1337)\
**Post date:** [November 24, 2020, 9:57am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/1 "2020-11-24T09:57:23Z")

</div>

Hello,

quick question. Is there a way to use Column-Widths like 1/3 and 2/3? Similar to the feature, when arranging fields in a Collection or Singleton, where you can select how much space a field should take.

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [November 24, 2020, 11:25am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/2 "2020-11-24T11:25:32Z")

</div>

Just apply the class `uk-width-1-3` to a child of a grid.

See: [https://getuikit.com/v2/docs/grid.html](https://getuikit.com/v2/docs/grid.html)

---

<div class="post-metadata">

**Author:** ![nino1337](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/nino1337/32/701_2.png) [@nino1337](https://discourse.getcockpit.com/u/nino1337)\
**Post date:** [November 24, 2020, 6:28pm UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/3 "2020-11-24T18:28:10Z")

</div>

I’m not using the uikit in my frontend. Furthermore i find it rather uncomfortable for a customer to maintain columns with classes. Can’t there be just the functionality we use to order fields but for the grid/columns? I could of course tell my customer to apply some classes + use the uikit in my frontend or write some logic to parse classes to column width but as i said i am not a huge fan of this.

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [November 25, 2020, 8:54am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/4 "2020-11-25T08:54:08Z")

</div>

I don’t understand… Are you talking about something inside cockpit or are you asking how to write the grid css for your frontend? Or maybe… do you mean the grid component of a layout field?

---

<div class="post-metadata">

**Author:** ![nino1337](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/nino1337/32/701_2.png) [@nino1337](https://discourse.getcockpit.com/u/nino1337)\
**Post date:** [November 25, 2020, 9:07am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/5 "2020-11-25T09:07:01Z")

</div>

Hey Raffaelj,

sorry, i reread my posts and found it confusing myself.

I mean the grid-component you can use from the layout-component addon, if i’m not mistaken.

 ![Bildschirmfoto 2020-11-25 um 10.04.56](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/eb9bb8390f19d47cfdacc36dc28e237538bf80bf.png)

Greetings and thanks for your help in advance

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [November 27, 2020, 11:12am UTC](https://discourse.getcockpit.com/t/cockpit-grid-using-1-3-and-2-3-columns/1721/6 "2020-11-27T11:12:53Z")

</div>

The grid component is available without the LayoutComponents addon, but you can overwrite core components or create new ones with that addon.

Unfortunately columns aren’t treated as separate components, so there is no “clean” way to change their behaviour.

I fiddled a bit, because I would like to add that feature to my [BlockEditor addon (wip)](https://github.com/raffaelj/cockpit_BlockEditor) and I found a way to change the widths. Just copy the modified file to `config/tags/field-layout-grid.tag` and you are able to set the widths.

Be aware, that overwritten fields won’t receive updates and that they can interfere with addons, that also try to overwrite the same field/component.

> <https://github.com/raffaelj/cockpit-scripts/blob/master/custom-fields/field-layout-grid.md>

> <https://github.com/raffaelj/cockpit-scripts/blob/master/custom-fields/field-layout-grid.tag>