Angular change centering of divs

Question

i create a dashboard in which i want to display key value values in a component. i get these values through an environment.ts file. this all works as i imagine. now i want to change the positions of the individual testcard components. i no longer want them to be positioned next to each other but instead achieve the following postioning in the mockup

i am new to angular and am not sure if i can create this using the ng container and just adjust the positioning of the divs here.

environment.ts:

col: 'col-6',
                            title: 'test',
                            info: 'testinfo',
                            content : [
                                {
                                    title: 'testvaluediv1',
                                    key: 'testvalue',
                                    pipe: {
                                        name: 'number',
                                        value: '1.0-0'
                                    },
                                    postFix: {
                                        text: 'test',
                                    },
                                    color: 'info',
                                    size: 'large'
                                },
                                   {
                                    title: 'testvaluediv2',
                                    key: 'testvalue',
                                    pipe: {
                                        name: 'number',
                                        value: '1.0-0'
                                    },
                                    postFix: {
                                        text: 'test',
                                    },
                                    color: 'info',
                                    size: 'large'
                                },
                                   *// till test5
                                }
                            ]
                        }

hmtl wher i use the component:

  <ng-container *ngFor="let config of config?.content" >
  
                <test-card *ngIf="!config.id" 
                    [config]="config"
                    [entity]="boxes[config?.key]"
                    
                ></test-card>

            </ng-container>

test-card (component) html:

<div>
<span *ngIf="config?.preFix?.icon" [class]="'pr-2 icon '+ config?.preFix?.icon"></span>
<span>{{config?.preFix?.text}} {{entity?.value | cut}} {{config?.postFix?.text}}</span>
<span *ngIf="config?.postFix?.icon" [class]="'pl-2 icon '+ config?.postFix?.icon"></span>
</div>
<div>
<span>{{config?.title}}</span>
</div>

what output i got yet:

Picture mock-up is confusing. Can you describe the layout you’re looking for in words? — Andrew Allen, Oct 31 '22 at 20:59
i want to have the first value in full size the other two next to the big div in half size. per component 3 div elements should be generated hence the line in my mockup. i guess i have to adjust the environment template as well — du7ri, Oct 31 '22 at 23:21

score 0 · Accepted Answer · answered Nov 01 '22 at 08:55

This can be done in pure css. Based on this answer.

See below:

grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
}

grid_item:nth-of-type(3n+1) {
  grid-column:span 2;
  grid-row:span 2;
}

/* non-essential decorative styles */
grid_item {
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

<grid-container>
  <grid_item>A</grid_item>
  <grid_item>B</grid_item>
  <grid_item>C</grid_item>
  <grid_item>D</grid_item>
  <grid_item>E</grid_item>
  <grid_item>F</grid_item>
</grid-container>

Angular change centering of divs

1 Answers1