Discover JTB_MD's grid system documentation for efficient, grid-based layout design. Explore the versatility of CSS Grid for seamless project structuring. Your comprehensive guide to mastering grid-based layouts.

About

JTB_MD's grid system is a layout structure built on the CSS grid concept. Unlike the flex system, the grid system allows you to design your project layouts in a two-dimensional grid-based format, offering advantages for complex interfaces and versatile positioning.

With its tabular structure and sorting features, the grid system proves to be invaluable, especially in scenarios involving product and element sorting. Additionally, it effortlessly handles spacing between elements, addressing a common challenge in the flex structure.

Similar to the flex system, the grid system provides distinct layout possibilities for different screens, thanks to well-defined classes tailored for various screen types.

How it works

The grid system in JTB_MD simplifies layout creation by leveraging the CSS grid concept. To get started, create a container and apply the .jtbG class, marking it as the main grid container. You can use multiple instances of this container on a single page or nest them without any limitations.

Once the main container is set, customize its behavior with container classes, and effortlessly insert and align your items within it using specific item-special property classes.

Basic Usage

To harness the power of the grid system in JTB_MD, begin by creating the main container that will house your items. Regardless of your project's goal, the main container should be adorned with the .jtbG class. With this class in place, you can apply various behavioral classes to configure the grid system according to your needs.

Display Options

JTB_MD's grid system offers two display options for main containers. By default, when you add the .jtbG class to an element, it works at the block level. If you want the element to function at the inline level, you can include the .jtbG-inline class.

For beginners in front-end development, understanding the concepts of block level and inline level is crucial to fully grasp the capabilities of the system:

.jtbG (block level): Occupies the entire row/column and dynamically positions itself based on its parent.
.jtbG-inline (inline level): Covers its content and positions itself, along with its children, based on the children's dimensions.

Remember that .jtbG-inline is not an alternative class for .jtbG. To make your item work at the inline level, add both classes to the element as .jtbG .jtbG-inline.

Hi! I'm block level box. :)

Hi! I'm inline level box. :)

                    <!-- Block Level Example -->
<div class='jtbG'>Hi! I'm block level box. :)</div>

<!-- Inline Level Example -->
<div class='jtbG jtbG-inline'>Hi! I'm inline level box. :)</div>

Adding Children

After creating the main container based on your project requirements, you can effortlessly add children to it.

While adding children, the only requirement is specifying the grid structure of the main container.

To define the number of columns in the main container, you can use one of the classes provided by JTB_MD:

.jtbG-col-[1-24], where [1-24] is a number between 1 and 24, specifying the desired number of columns.

Similarly, you can specify the number of rows for your main container using classes:

.jtbG-row-[1-24], where [1-24] is a number between 1 and 24, specifying the desired number of rows.

Grid Child

                    <!-- Grid with Children -->
<div class='jtbG jtbG-col-3'>
    <div>Grid Child</div>
    <div>Grid Child</div>
    <div>Grid Child</div>
</div>

It is also possible to use grid containers as nested elements.

Nested Child

Grid Child

                    <!-- Nested Grid Example -->
<div class='jtbG jtbG-col-3'>
    <div class='jtbG jtbG-col-2'>
        <div>Nested Child</div>
        <div>Nested Child</div>
    </div>
    <div>Grid Child</div>
    <div>Grid Child</div>
</div>

If you don't specify the number of columns in your main element, the system automatically assigns 1 column by default.

Container Features

Once you've created your main container and added its children, you are free to manipulate the behavior of your main container to achieve your specific goals using simple classes.

Fill Direction

JTB_MD defaults to ordering items in your main container row by row. However, if you prefer to order items column by column, you can easily achieve this by adding the relevant directional class to your main container.

.jtbG-[row | column]

Child 1

Child 2

Child 3

Child 4

Child 5

Child 6

Child 1

Child 2

Child 3

Child 4

Child 5

Child 6

                    <!-- Fills row by row -->
<div class='jtbG jtbG-col-3 jtbG-row-2 jtbG-row'>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

<!-- Fills column by column -->
<div class='jtbG jtbG-col-3 jtbG-row-2 jtbG-column'>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

Aligning Items

To set the position of children in your main grid container, you can use four possible classes in JTB_MD:

.jtbG-align-start (default) aligns children towards the start of the grid cell.
.jtbG-align-center aligns children towards the center of the grid cell.
.jtbG-align-end aligns children towards the end of the grid cell.
.jtbG-align-stretch stretches children in the grid cell.

start

center

end

stretch

                    <!-- Start of cell -->
<div class='jtbG jtbG-align-start'>
    ... children ...
</div>

<!-- Centered in cell -->
<div class='jtbG jtbG-align-center'>
    ... children ...
</div>

<!-- End of cell -->
<div class='jtbG jtbG-align-end'>
    ... children ...
</div>

<!-- Stretched items -->
<div class='jtbG jtbG-align-stretch'>
    ... children ...
</div>

Justifying Items

To justify children in your main grid container, you can use four possible classes in JTB_MD:

.jtbG-justify-start (default) justifies children towards the start of the grid cell.
.jtbG-justify-center centers children in the grid cell.
.jtbG-justify-end justifies children towards the end of the grid cell.
.jtbG-justify-stretch stretches children in the grid cell.

start

center

end

stretch

                    <!-- Start of cell -->
<div class='jtbG jtbG-justify-start'>
    ... children ...
</div>

<!-- Centered in cell -->
<div class='jtbG jtbG-justify-center'>
    ... children ...
</div>

<!-- End of cell -->
<div class='jtbG jtbG-justify-end'>
    ... children ...
</div>

<!-- Stretched items -->
<div class='jtbG jtbG-justify-stretch'>
    ... children ...
</div>

Creating Gaps

If you want to adjust gaps between your grid cells, you can simply add one of the related gap classes of the grid system into your main container:

Column Gaps

To create gaps between columns, use the column-specific gap classes:

.jtbG-gap-col-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where the numbers specified in classes represent multipliers of the main font size of the project. To make it more clear, to calculate how much space will be there between children, you can easily convert the underscore to a period and multiply it by your base font size. For instance, if the class contains the value 1_75, it indicates that the gap will be 1.75rem.

Child 1

Child 2

Child 3

Child 4

Child 5

Child 6

                        <!-- 1rem column gap -->
<div class='jtbG jtbG-col-3 jtbG-row-2 jtbG-gap-col-1'>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

Row Gaps

Similar to column gaps, to create gaps between rows, use the row-specific gap classes:

.jtbG-gap-row-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where, again, the numbers specified in classes represent multipliers of the main font size of the project. (1_75 indicates 1.75rem gap)

Child 1

Child 2

Child 3

Child 4

Child 5

Child 6

                        <!-- 1rem row gap -->
<div class='jtbG jtbG-col-3 jtbG-row-2 jtbG-gap-row-1'>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

Together

If you do not specify the gap direction while adding a gap class, JTB_MD automatically adds gaps to rows and columns together:

.jtbG-gap-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where, again, the numbers specified in classes represent multipliers of the main font size of the project. (1_75 indicates 1.75rem gap)

Child 1

Child 2

Child 3

Child 4

Child 5

Child 6

                        <!-- 1rem row & column gap -->
<div class='jtbG jtbG-col-3 jtbG-row-2 jtbG-gap-1'>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
    <div>Child 5</div>
    <div>Child 6</div>
</div>

Children Features

Similar to adjusting the main container, JTB_MD provides classes for making changes to individual children:

Positioning

To set the position of a child within your main grid container, you can specify the columns and rows by adding JTB_MD classes to the items:

For item positioning, you can use:

.jtbG-[row | col]-[start | end]-[1-25] where:

[row | col] specifies the direction of positioning,
[start | end] specifies the start or end of the item,
[1-25] states the grid line of the main container.

By adding simple classes like the ones mentioned above, you can easily adjust the positioning of your items in your container:

col[4-10] row[1-2]

col[9-11] row[1-3]

col[12-20] row[2-3]

                    <!-- Positioning children -->
<div class='jtbG jtbG-col-24 jtbG-row-2'>
    <div class='jtbG-col-start-4 jtbG-col-end-10 jtbG-row-start-1 jtbG-row-end-2'>col[4-10] row[1-2]</div>
    <div class='jtbG-col-start-9 jtbG-col-end-11 jtbG-row-start-1 jtbG-row-end-3'>col[9-11] row[1-3]</div>
    <div class='jtbG-col-start-12 jtbG-col-end-20 jtbG-row-start-2 jtbG-row-end-3'>col[12-20] row[2-3]</div>
</div>

Important: Keep in mind that the [1-25] option specifies the grid line, not the grid cell.

Aligning

To set a child's alignment in your main grid container, there are 4 possible classes you can use in JTB_MD.

.jtbG-align-self-start (default) makes the child packed toward the start of the grid cell.
.jtbG-align-self-end makes the child packed toward the end of the grid cell.
.jtbG-align-self-center makes the child packed toward the center of the grid cell.
.jtbG-align-self-stretch makes the child stretched in the grid cell.

start

center

end

stretch

                    <!-- Alignment options applied to items directly -->
<div class='jtbG jtbG-col-4'>
    <div class='jtbG-align-self-start'>start</div>
    <div class='jtbG-align-self-center'>center</div>
    <div class='jtbG-align-self-end'>end</div>
    <div class='jtbG-align-self-stretch'>stretch</div>
</div>

Justifying

To justify a single child in your main grid container, there are 4 possible classes you can use.

.jtbG-justify-self-start (default) makes the child packed toward the start of the grid cell.
.jtbG-justify-self-center makes the child centered in the grid cell.
.jtbG-justify-self-end makes the child packed toward the end of the grid cell.
.jtbG-justify-self-stretch makes the child stretched in the grid cell.

start

center

end

stretch

                    <!-- Jusdtifying options applied to items directly -->
<div class='jtbG jtbG-col-4'>
    <div class='jtbG-justify-self-start'>start</div>
    <div class='jtbG-justify-self-center'>center</div>
    <div class='jtbG-justify-self-end'>end</div>
    <div class='jtbG-justify-self-stretch'>stretch</div>
</div>

Responsiveness

Thanks to the responsive structure of JTB_MD, you can make all classes specified within this section work differently on various screen sizes. To achieve this, simply add the corresponding screen breaker at the end of each class, separated by a hyphen (-). Examples include:

You can examine the codes of screen breakers, their related pixel sizes and screen types, from Breakpoints seciton.

In the following example the formation of children in container will have gaps among them if your screen size is bigger than 1920px.

Grid Child

                            <!-- Resize your browser to see the difference on different screens -->
<div class='jtbG jtbG-col-3 jtbG-gap-1-xxl'>
    ... children ...
</div>