Skip to content

Instantly share code, notes, and snippets.

@ypcode
Created January 10, 2019 13:41
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 ypcode/f3e2b87ccec20310cba63f98c22cf70d to your computer and use it in GitHub Desktop.
Save ypcode/f3e2b87ccec20310cba63f98c22cf70d to your computer and use it in GitHub Desktop.
<div className="ms-Grid-row">
<h1>Without section responsive (OUIF Half)</h1>
<div className={`ms-Grid-col ms-sm12 ms-xl6 ${styles.outline}`}>
Block 1
</div>
<div className={`ms-Grid-col ms-sm12 ms-xl6 ${styles.outline}`}>
Block 2
</div>
<div className={`ms-Grid-col ms-sm12 ms-xl6 ${styles.outline}`}>
Block 3
</div>
<div className={`ms-Grid-col ms-sm12 ms-xl6 ${styles.outline}`}>
Block 4
</div>
<div className={`ms-Grid-col ms-sm12 ms-xl6 ${styles.outline}`}>
Block 5
</div>
</div>
<div className="ms-Grid-row">
<h1>With section responsive (One column: half , 2/3 columns : 8, Two columns: full) </h1>
<div className={`ms-Grid-col ms-xl6 OneColumnSection-6 TwoThirds-8 TwoColumnsSection-12 ThreeColumnsSection-12 OneThird-12 ${styles.outline}`}>
Block 1
</div>
<div className={`ms-Grid-col ms-xl6 OneColumnSection-6 TwoThirds-8 TwoColumnsSection-12 ThreeColumnsSection-12 OneThird-12 ${styles.outline}`}>
Block 2
</div>
<div className={`ms-Grid-col ms-xl6 OneColumnSection-6 TwoThirds-8 TwoColumnsSection-12 ThreeColumnsSection-12 OneThird-12 ${styles.outline}`}>
Block 3
</div>
<div className={`ms-Grid-col ms-xl6 OneColumnSection-6 TwoThirds-8 TwoColumnsSection-12 ThreeColumnsSection-12 OneThird-12 ${styles.outline}`}>
Block 4
</div>
<div className={`ms-Grid-col ms-xl6 OneColumnSection-6 TwoThirds-8 TwoColumnsSection-12 ThreeColumnsSection-12 OneThird-12 ${styles.outline}`}>
Block 5
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment