I have a screen where there are five regions side by side. Because apex works on the basis of 12 grid columns, I am facing an issue where five regions are not spanning horizontally equally basically 20% each.

Each region is occupying 2 grid columns out of 12 grid columns, so total 10 grid columns are occupied and the rest 2 grid columns stay empty like below

Is there a way through which I can span them equally across screen so that no space is left out on either ends?

Using oracle apex 24.2 with 23ai

I have a screen where there are five regions side by side. Because apex works on the basis of 12 grid columns, I am facing an issue where five regions are not spanning horizontally equally basically 20% each.

Each region is occupying 2 grid columns out of 12 grid columns, so total 10 grid columns are occupied and the rest 2 grid columns stay empty like below

Is there a way through which I can span them equally across screen so that no space is left out on either ends?

Using oracle apex 24.2 with 23ai

• css
• sql
• plsql
• flexbox
• oracle-apex

• If you cannot change the number of columns, it would seem that the optimal idea would simply be to have your 5 "double" columns start on column 2 and have 1 column empty on each side. – Paulie_D Commented Mar 14 at 15:57
• Why have you tagged flexbox if this a grid layout? – Paulie_D Commented Mar 14 at 15:58
• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon. See How to create a Minimal, Reproducible Example – Paulie_D Commented Mar 14 at 15:58

1 Answer 1

Use your own css classes for this and ignore the default APEX grid columns. The example below creates a container region with 5 sub regions displayed next to another. Flexbox has a lot of attributes - I used this site to get familiar with it. Example:

css classes

Page attributes > CSS > Inline

.flex-container {
  display: flex; /* or inline-flex */
  flex-wrap: nowrap;
  overflow: auto; 
}
.flex-item {
    flex-basis: 500px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;

container region

Create a region with "Blank with Attributes (No Grid)" template and assign the flex-container class:

child regions

Create 5 subregions of the container region with class flex-item

result: