36

I'm developing an application using React and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks about a fluid grid system. The example looks like: 

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

and I do not know what is xs, sm and lg is? Could someone please explain?

Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
daydreamer
  • 87,243
  • 191
  • 450
  • 722
  • 3
    its the measure of how much column space each `col` takes on different screen sizes. xs -> extra small, sm -> small, md -> medium, lg -> large. See that each size totals up to `12`(the number of columns the screen is divide into) – Jones Joseph Apr 17 '17 at 05:27
  • Thanks, if I do column wise adddition, `xs` column sums to `24` and not 12, does it means 2 rows? where 1st col takes the full row and 2nd and 3rd col fits in second row with 50% width each? – daydreamer Apr 17 '17 at 05:40

2 Answers2

75

Let us assume that our screen is divided into 12 columns.

The xs part takes up when screen is extra small, Similarly small, medium and large classes as well, based on their respective screen size definition in CSS.

The example you provided:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

For our sake lets assume these three columns are named as col-1, col-2 and col-3

On an extra small screen:

col-1 takes up all the 12 columns and the rest two of them take 6 each(on a new row) enter image description here

On small screens

col-1 and col-3 takes up 3, while the middle one col-2 takes 6 enter image description here

Similarly

Medium screens enter image description here

Large screens enter image description here

P.S. Images are screenshots of the link you provided (by resizing the browser for each screen size)

Community
  • 1
  • 1
Jones Joseph
  • 4,703
  • 3
  • 22
  • 40
17

React Flexbox Grid can be used to make your website responsive. It is derived from the grid system followed by Bootstrap.

The grid system divides the screen into 12 columns and you can mention how much width can be taken for components in mobile devices, tablets and desktops. The breakpoints for xs, sm, md, lg and xl are 576px, 768px, 992px and 1200px.

You can see the difference by resizing the browser window of the page https://roylee0704.github.io/react-flexbox-grid/

Its same as the below media query

// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Lini Susan V
  • 1,135
  • 1
  • 8
  • 25