How can I use Angular flex-layout to create a left justified grid but have the whole grid centered on the screen?

0
votes

I am trying to use Angular flex-layout create a grid of images that is left justified, but I want the whole grid to be centered on the screen. The problem is that I can only center it row by row, which makes the the last one not left justified. I think I need a way to get the container to shrink to the size of the content but display: inline-block is not doing it.

See images:

Left justified, but not centered on the screen aka fxLayoutAlign="start center"

Centered on the screen, but not left justified aka fxLayoutAlign="center center"

Paint Mockup of what I want

Here is my code:

* {
  border: 1px solid black;
}

.gallery {
  display: inline-block;
}

.tile{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
}


<div class="gallery" fxLayout="row wrap" fxLayoutAlign="start center">
  <div class='tile' *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"> </div>
</div>
1
angularflexboxangular-material
can you add a image of what you want as last output. – shashank sharma
@shashanksharma Sure, I added a paint mockup with annotations – Isabel
keep it left align but add inner left-right padding to main div. – shashank sharma
Hi, did you find a solution or alternative for your question? – Juan Pablo Moreno Martín
@JuanPabloMorenoMartín Your second option was pretty close to what I needed. I accepted your answer. – Isabel

1 Answers

0
votes

Make sure the galery element is positioned relative, fixed, absolute, or sticky. And adjust the margins by "left and transform".

CSS:

.tile{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

.gallery {
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
}

<div class="gallery" fxLayout="row wrap">
  <div class="tile"  fxLayoutAlign="start center" *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"></div>
</div>

See the example working here: stackblitz

[Edited]

I have edited my answer to show what would be the best option, as is well discussed in the comments in this answer, the flexible format is probably not the easiest to achieve what is asked, my suggestion is to make the squares self-adjusting and it would be more visually pleasing to the user.

I hope one of my 2 options can help you.

CSS:

.galery{
  margin-left: 50%;
  transform:translateX(-50%);

  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

.title{
  background-color: red;
  width: 100%;
  height: 100px;
  border: 1px solid black;
}

<div class="galery">
  <div class="title" *ngFor="let number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]"></div>
</div>

See the example working here: stackblitz