fxLayout: Arranging div as Table on Specific Breakpoint
Tags: css, html
Published: 2020-05-30 09:07:50

I’ve encountered a layout requirement to reorganize divs to table when in mobile view.

Large Screen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fn139brwt9lkb7kt4xqv.JPG)

Small Screen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dwvzismik1dqnx0rkgq2.JPG)


Here are the specifics:

**Large Screen:** The yellow div holds green divs arranged in a row. Green divs holds 2 red divs on a column.

**Small Screen:** The yellow div holds green divs arranged in a column. Green divs holds 2 red divs on a row.

Notice that the two resolutions have opposite behavior when arranging the green and red divs. Since flex-layout is already integrated, this should be easier with the help of breakpoints and ngClass.

HTML

```html
<div fxLayout="row" fxLayout.xs="column" class="table" ngClass.xs="table-mobile">
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title A:</div>
    <div fxFlex class="cell">Alpha Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title B:</div>
    <div fxFlex class="cell">Bravo Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title C:</div>
    <div fxFlex class="cell">Charlie Content</div>
  </div>
  <div fxLayout="column" fxLayout.xs="row" class="row">
    <div class="cell">Title D and unusually long string:</div>
    <div fxFlex class="cell">Delta Content the quick brown fox jumps over the lazy dog</div>
  </div>
</div>
```

CSS
```css
/**main**/
.table-mobile {
	display: table !important;
}

.table-mobile .row {
	display: table-row !important;
}

.table-mobile .cell {
	display: table-cell;
}
```

Here are some stuff to note:

A. HTML

- We have three div classes: `table`, `row`, `cell`. This will serve as styling classes as well as segments of our markup.

- For the large screen, we told flex-layout the following: 
a. `table` is arranged into row. 
b. `row` is arranged into column. This is done thru the `fxLayout="row"` and `fxLayout="column"` tags on the divs.


- For the small screen, we told flex-layout the vice-versa of large screen. On this one, we will be using a small screen breakpoint: `fxLayout.xs="row"`. `.xs` denotes that this will be triggered when the screen resolution has `max-width: 599px`. You can see details on breakpoints in here.

- Since the requirement wants to enforce a table-like layout on small screen, we used `table-mobile` css class on `.xs breakpoint`: `ngClass.xs="table-mobile"`.

- `fxFlex` was used to equalize the height of the divs when there are uneven spaces left. This will be visible when on large screen.

B. CSS

- We have 3 rules for the 3 segments of our markup that mimics the behavior of `<table>` element.

- `!important` tag was used to override the flex-layout styles. Note that in using `fxLayout` directives, it will automatically attached various styling attributes.

Here is the [plunkr](https://plnkr.co/edit/7rsHjF1T58exGZch2gAb?p=preview&preview) demo.

As you play around, try the following:
- on large screen, remove `fxFlex`
- on small screen, remove `ngClass.xs="table-mobile`