[Antimatter] Grid row and column classes in Antimatter theme?

Hello,

last year I created a website with Materializecss framework. Now, I found Grav CMS and Antimatter really interesting. However, Is there any grid row and column class in Antimatter theme? In materialize or bootstrap there are several classes which we can use easily to place a component and justify the position, such as row, "col l6", or "col-md-12".
If not, are there any representative class? Unfortunately, I only know the feature class from the example on onepage-skeleton which is not enough for me.
I would like to add such a team module like in Gravstrap's "team module" http://gravstrap.diblas.net/gravstrap-components-for-grav-cms-application/modules-shortcodes-for-grav-cms#team-module.

Thanks.

<< However, Is there any grid row and column class in Antimatter theme?

Absolutely. Grav's Antimatter theme utilizes Yahoo's lightweight grid system -- Pure. Complete documentation on the Pure site.

In Developer Tools (or view source) review some multi-column pages built with Antimatter. You'll see how Pure is used for the grid system.

Additionally, Antimatter's home-grown css framework called Nucleus can also be called. Nucleus grids are written to take advantage of flexbox. Examples of column creation with this code reside in /user/themes/antimatter/scss/nucleus/_flex.scss.

thanks gchambers for referring to the documentation

which developer tools or view source can I see some review of multi-colum pages?

Note: the following response assumes that you have a working localhost web server as you'll need to view the pages in a browser.

Download the Grav Blog Site Skeleton. I'm suggestion this one because it happens to be the one in front of me and its pretty light-weight.

Unzip into your htdocs folder (or whatever source folder your local web server is called).

In Chrome browser, open Blog Site skeleton. While on the home page, open Chrome Dev Tools (F12) and scroll down to a portion of the page that contains two columns. You should see something like the following: 2016-03-11_11-34-07 . I've indicated the column divs that call the Pure grid selectors.

Alternately, you can open the same page in any browser and right-click on the page. Choose "View Page Source" from the context menu. Scroll down until you see something like this: 2016-03-11_11-36-23 . View source is just a more vanilla view of the same code.

The examples above are merely intended to point you in the right direction -- not how to design a grid layout.

FYI, Antimatter uses Flex primarily for the columns, with a PureCSS fallback for non-flex browsers. The flex syntax is here: https://github.com/getgrav/grav-theme-antimatter/blob/develop/scss/nucleus/_flex.scss

The Pure syntax is very similar and is here: http://purecss.io/grids/

Antimatter doesn't use a full CSS framework, just a lightweight minimal one. If you are looking for a full framework, check out one of the other themes in the downloads.

@rhukster, this is actually very useful information. It answers a nagging question that I had about the relationship between Pure and Nucleus relative to writing layout styles. Thanks.

@rhukster: thanks for the information. However, since I never use flex and I need time to understand flex, what is the suitable html skeleton to create responsive 2 column grid?
Shall it be like this:
<div class="container">
<div class="grid size-1-2"> ... <div>
<div class="grid size-1-2"> ... <div>
<div>
?
I still cannot find an example page using this flex. Maybe you can refer me to an example Antimatter page, so that I can analyse its html structure.

That should work.