Vertical cell alignment in Office UI Fabric grid

user_5062558 0
Viewed 2191

Office UI Fabric offers a grid layout mechanism documented here. Column entries in a row (of class "ms-Grid-row") are of class "ms-Grid-col".

I cannot get the vertical alignment of a column entry to work properly, as all entries are always rendered with top alignment. From what I understand, the css property "align-items: center;" should do the trick, but it doesn't impact vertical alignment.

Is it possible to override vertical alignment to have all entries in a grid center-aligned ?

office-ui-fabric css
2 Answers

I dont see such option within the office UI CSS fabric, however, you can use the FLEX CSS layout

For this approach, just use the diplay:flex for the grid row container, and add the additional flex rules according as the cheatsheet describes, so it vertically aligns any grid column that row containe could contain.

Example:

<div class="ms-Grid-row" style="display:flex">        
  <div class="ms-Grid-col  ms-sm6" >
    Content to be vertically aligned 1
  </div>
  <div class="ms-Grid-col  ms-sm6" >
    Content to be vertically aligned 2
  </div>
</div>
user_15386040

I might be answering this question too late. But I found the perfect way to do this:

Apply the following css to the grid row element (the parent to your ms-Grid-col):

.container{
  display: flex;
  align-items: center;
}

Reference: https://www.smashingmagazine.com/2019/03/css-alignment/

user_50147120
Related