Skip to content

Instantly share code, notes, and snippets.

@DuncanFaulkner

DuncanFaulkner/grid-demo.html

Last active March 25, 2021 21:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DuncanFaulkner/b5688931721097f975deed40a2481e13 to your computer and use it in GitHub Desktop.
Save DuncanFaulkner/b5688931721097f975deed40a2481e13 to your computer and use it in GitHub Desktop.
Download ZIP
flex-layout grid demo
Raw
grid-demo.html
<div>
<h2>Grid Layout</h2>
<span>With specific column spans.</span>
</div>
<div class="outerContainer">
<div fxLayout="row" class="container">
<div fxLayoutAlign="center center">flex: 1 1 5em;</div>
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div fxFlex="2 2 calc(10em + 10px)" fxLayoutAlign="center center" class="two"> flex: 2 2 calc(10em + 10px);</div>
<div></div>
</div>
<div class="container">
<div fxFlex="2 2 calc(10em + 10px)" fxLayoutAlign="center center" class="two"> flex: 2 2 calc(10em + 10px);</div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div fxFlex="2 2 calc(10em + 10px)" fxLayoutAlign="center center" class="two"> flex: 2 2 calc(10em + 10px);</div>
</div>
<div class="container">
<div fxFlex="3 3 calc(15em + 20px)" fxLayoutAlign="center center" class="three"> flex: 3 3 calc(15em + 20px);</div>
<div></div>
</div>
<div class="container">
<div></div>
<div fxFlex="3 3 calc(15em + 20px)" fxLayoutAlign="center center" class="three"> flex: 3 3 calc(15em + 20px);</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment