How to adjust the container size based off the height panel

[nimaforoughi]

Hello, I cannot adjust the container size based off the panel height. by default the container will be adjusted automatically according to the panel’s width. But the height does not take effect.

also, the container is always on the left corner whereas I would like to put in the centre (horizontally and vertically), with white gaps on left and right and the grid will have the ratio of 1 / 1 (square).

Can you please assist?

HTML:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

CSS:

  html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    // width: calc(100vh - 20px); /* Assuming you want the grid width to be the same as the viewport height minus some padding */
    // height: calc(100vh - 20px); /* Adjust the height based on the viewport height */
    justify-content: center;
    align-content: center;
  }

  .grid-item {
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff; /* Just to make the grid items more distinguishable */
  }

[vitPinchuk]

Hi @nimaforoughi One way to center a container is to add properties to the parent container display: flex; align-items: center; justify-content: center;

So in our case: I`ve added your eaxample and the result is:

We should add styles for one of parent containers

We can add styles directly in styles editor. like that:

  display: flex;
  align-items: center;
  justify-content: center;

in this case it will apply the styles for the specified container

And we can add width and height

here code example

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 200px; /* Assuming you want the grid width to be the same as the viewport height minus some padding */
    height: 200px; /* Adjust the height based on the viewport height */
    justify-content: center;
    align-content: center;
  }

  .grid-item {
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff; /* Just to make the grid items more distinguishable */
  }

  display: flex;
  align-items: center;
  justify-content: center;

I believe, it should help you. Let us know if you have any questions. Thanks

[nimaforoughi]

Thanks for the detailed explanations. It resolves my issue if I have only container. However, if I have multiple objects, all of them will be impacted by the parent settings. My question is how to position each object individually based off the panel size vertically and horizontally. I guess there is a limitation on how panels in grafana are defined. For example there is no vw and vh based on the panel size. The current vw and vh are referring the whole dashboard rather than the panel size.

thanks

[mikhail-vl]

@vitPinchuk Please check the latest response from @nimaforoughi.

[vitPinchuk]

@nimaforoughi Can you provide more details about your implementation.
For example how many (for example) and how the elements should be arranged in the panel. The simplest solution (if we don't have a single container) could be to use a percentage size. Or using margin for positioning and alignment.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

<div class="grid-a">
  <div class="grid-item-a">1</div>
  <div class="grid-item-a">2</div>
  <div class="grid-item-a">3</div>
  <div class="grid-item-a">4</div>
  <div class="grid-item-a">5</div>
  <div class="grid-item-a">6</div>
  <div class="grid-item-a">7</div>
  <div class="grid-item-a">8</div>
  <div class="grid-item-a">9</div>
</div>

<div class="grid-b">
  <div class="grid-item-b">1</div>
  <div class="grid-item-b">2</div>
  <div class="grid-item-b">3</div>
  <div class="grid-item-b">4</div>
  <div class="grid-item-b">5</div>
  <div class="grid-item-b">6</div>
  <div class="grid-item-b">7</div>
  <div class="grid-item-b">8</div>
  <div class="grid-item-b">9</div>
</div>

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
  }

  .grid-container {
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width:50%; 
    height: 50%;
    justify-content: center;
    align-content: center;
  }

  .grid-a {
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 200px; 
    height: 200px; 
    justify-content: center;
    align-content: center;
  }

   .grid-b {
    margin: 20px 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 30%; 
    height: 30%; 
    justify-content: center;
    align-content: center;
  }

  .grid-item {
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff; 
  }

 .grid-item-a {
    background-color:brown;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
  }

   .grid-item-b {
    background-color:darkcyan;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff; 
  }