Skip to content

Instantly share code, notes, and snippets.

@ypcode
Created Jan 10, 2019
Embed
What would you like to do?
<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