Using Angular with CSS Grid: Avoid distributing grid items evenly in terms of width

Question

Using Angular with CSS Grid: Avoid distributing grid items evenly in terms of width

I am working on an app that utilizes a grid with rows and columns. One of the features allows me to dynamically remove rows, causing the remaining items to evenly distribute themselves across the width of the grid.

However, I now require a layout similar to flex but using grid instead. Specifically, I need each grid item to have a margin next to the adjacent item, as shown in this example, without distributing themselves across the entire width.

CSS

.column {
      padding: 10px;
      margin: 10px 0;
      display: grid;
      grid-auto-flow: column;
      .row-item {
        text-align: center;
        display: grid;
        grid-auto-rows: 25px;
        grid-row-gap: 10px;
        width: 9vw;
      }
}

HTML

<div class="column">
  <ng-container *ngFor="let jS of journeyStepDisplay">
    <div *ngIf="jS.display" class="row-item">
      <div class="column-item header">
        <p>{{ jS.name }}</p>
      </div>
    </div>
  </ng-container>
</div>

html css angular

Answer 1

Answer №1

When you have specified minimum and/or maximum widths for grid items, you can utilize a combination of different grid properties to achieve the desired layout, such as

grid-template-columns: repeat(auto-fit, minmax(100px, 100px));

In this scenario, we are creating a grid where the items will be evenly distributed with a minimum and maximum width of 100px. If they exceed the row's width, a new row will automatically be added.

.container {
  height: 200px;
  width: 600px;
  gap: 5px;
  border: 2px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-template-rows: auto;
  padding: 10px;
}

.box {
  border: 2px solid blue;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

When you have specified minimum and/or maximum widths for grid items, you can utilize a combination of different grid properties to achieve the desired layout, such as

grid-template-columns: repeat(auto-fit, minmax(100px, 100px));

In this scenario, we are creating a grid where the items will be evenly distributed with a minimum and maximum width of 100px. If they exceed the row's width, a new row will automatically be added.

.container {
  height: 200px;
  width: 600px;
  gap: 5px;
  border: 2px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-template-rows: auto;
  padding: 10px;
}

.box {
  border: 2px solid blue;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 3

Answer №2

It is essential to specify the width for each individual item.

<div class="column">
  
    <div class="row-item">
      <div class="column-item header">
        <p>ciao</p>
      </div>
    </div>
  
  <div class="row-item">
      <div class="column-item header">
        <p>ciao2</p>
      </div>
    </div>
  
  <div class="row-item">
      <div class="column-item header">
        <p>ciao3</p>
      </div>
    </div>
  
</div>

.column {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: auto;
}

.row-item {
        text-align: center;
}

Here's a helpful guide. (I did not utilize the directive from angular, but you can incorporate it as needed)

Answer 4

It is essential to specify the width for each individual item.

<div class="column">
  
    <div class="row-item">
      <div class="column-item header">
        <p>ciao</p>
      </div>
    </div>
  
  <div class="row-item">
      <div class="column-item header">
        <p>ciao2</p>
      </div>
    </div>
  
  <div class="row-item">
      <div class="column-item header">
        <p>ciao3</p>
      </div>
    </div>
  
</div>

.column {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: auto;
}

.row-item {
        text-align: center;
}

Here's a helpful guide. (I did not utilize the directive from angular, but you can incorporate it as needed)

Using Angular with CSS Grid: Avoid distributing grid items evenly in terms of width

Answer №1

Answer №2

Similar questions

Exploring the capabilities of Angular 8 Services using 'TestHttpInterceptor'!

Unable to eliminate the beforeunload event

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

Unable to center div container with margin set to auto

Retrieving the latest iteration of array object attributes and filling in form fields

Turn off slider trace animation?

What is the best way to manipulate the canvas "camera" in HTML?

Assigning the image source to match the image source from a different website using the image ID

Having trouble reaching a public method within an object passed to the @Input field of an Angular component

The absolute positioning of a div nested within another div is not being applied correctly

Simplest method for transforming static HTML files within SharePoint

Angular 2 encountered an unexpected error when trying to access a URL: Response with status code 401 indicating unauthorized access

Discovering an element in an Array using Angular 2 and TypeScript

A helpful tip for disabling by overriding webkit-transform without removing the line

Testing to submit a form using ReactiveForm can be done by reloading the form while it is being submitted

Validating Forms using JQuery

Understanding the Code for Responsive Web Typography with line-height in ems

Ensure that the radio button is set to its default option when the user accesses the page

Ways to implement global variables in JavaScript modules for wider accessibility

How to manually implement a scrollspy feature in Angular