Flexbox and Grid layout are both powerful CSS tools for creating responsive and flexible web layouts, but they have some key differences in terms of their capabilities and intended use cases.
Although beCSS is mostly Flexbox based, it also includes a column system based on the CSS Grid Layout.
Flexbox Layout
The beCSS layout is a very simple flexbox based container. The container can have up to 12 columns, and the classes are named based on the numbers of columns you want to use.
If you want a content to have 3 columns width, so simply you use the class be-col-3.
If you need three columns of equal size, just keep in mind that the sum does not exceed 12. For example, three columns of 4 or three of 2 would give the same effect.
Note that to hold a groud of columns you must put it inside of be-column-container class.
<div class="be-column-container">
<div class="be-col-4">be-col-4</div>
<div class="be-col-4">be-col-4</div>
<div class="be-col-4">be-col-4</div>
</div>
As you can see the columns take all the remaining space when there are no other columns. In such a way that a single column would occupy the space of twelve if there were no others at its side.
However, when adjusting the size of the window it will be noticed that two columns of 6 will have a breaking point faster than two of 3.
Flexbox Layout breakpoint
All columns have a flexibility of 99% multiplied by their number and divided by 12. Eg. be-col-3 would be: 99% x 3/12.
In this way the flexibility of be-col-3 would be 24.75%.
However, the percentage of flexibility changes depending on the breaking point. For example, be-col-3 has 24.75% flexibility between 100 and 49.375em, while in 53.125em has 30% flexibility.
On the other hand, all columns reach 100% flexibility in approximately 29em.
Breakpoint
28.125em (450px)
34.375em (550px)
41.25em (660px)
46.875em (750px)
53.125em (850px)
59.375em (950px)
100em (1.600px)
Columns heights
You can also indicate a minimum height for the columns, however the content inside them will take precedence over their final height. Furthermore, all columns within the same container will assume the same minimum size while they are in the same row. Once the break point is reached, the columns that are not in the same row will have their default height.
The be-height class can be used any other component. To see more about the height see Utilities.
<div class="be-column-container">
<div class="be-col-2 be-height-6">be-col-2</div>
<div class="be-col-4">be-col-4</div>
<div class="be-col-6">be-col-6</div>
</div>
Columns gap
By default, the gap between columns is set to .5em, although internally there is a padding of 5px. You can changed to 5px or 10px using classes be-gap-5 and be-gap-10.
<div class="be-column-container be-gap-5">
<div class="be-col-4">be-col-4</div>
<div class="be-col-4">be-col-4</div>
<div class="be-col-4">be-col-4</div>
</div>
The thickness of the gap can force the columns to divide if the sum of their measurements is exceeded. There is approximately a 3% margin of flexibility before reaching the breaking point.
<div class="be-column-container be-gap" style="--gap: 20px;">
<div class="be-col-4 be-height-6">be-col-4</div>
<div class="be-col-4 be-height-6">be-col-4</div>
<div class="be-col-4 be-height-6">be-col-4</div>
</div>
<!-- Columns Gap sizes classes
Each number represents its value in pixels-->
.be-gap-0 <!-- Removes the default value -->
.be-gap-5
.be-gap-10
.be-gap <!-- for use the variable -->
For other measures use the variable --gap applying the style directly to the html, as shown below.
<div class="be-gap" style="--gap: 15px;">
Redimensioning a group of columns
The column container can also be resized to obtain a specific result using the class be-width, as shown in the following example. If you want to alignn the columns to the center you can use the be-columns-align-center class.
Go to the Utilities section to learn more about how to use the be-width class.
<div class="be-column-container be-columns-align-center be-width-20">
<div class="be-col-3">be-col-3</div>
<div class="be-col-3">be-col-3</div>
<div class="be-col-4">be-col-4</div>
<div class="be-col-6">be-col-6</div>
</div>
.be-width <!-- for use the variable -->
<!-- Measures with established classes -->
.be-width-5
.be-width-10
.be-width-15
.be-width-20
Ghost Column
The general behavior of the columns, as we have seen, is to assume the remaining space until finding the next limit. However, sometimes you may need a column to end just in its specified size. For this you can accompany it with a ghost column.
<div class="be-column-container">
<div class="be-col-4">be-col-4</div>
<div class="be-col-8 be-col-ghost"></div>
</div>
As you can see from the example above, column 4 does not extend to 100%, since its side is a ghost column of 8. In any case, any component that is inside a column can be adjusted to measure using the specific classes for that purpose, or even adjusting the column container itself.
If you want a column to only occupy the size of the content it contains, simply do not include any class that specifies the width of it.
<div class="be-column-container">
<div class=">I have height but not width</div>
</div>
Grid Layout
The Grid Layout Container is an additional column system, grid-based, that uses the grid-template-column property, and in which the number of columns is previously defined in the same container.
In this system, the columns do not have a specific measurement since their size is determined by the number of columns that have been indicated.
<div class="be-grid-container-4"><!-- 4 column container-->
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
As you can see, the container indicates that the template must have four columns, but when adding one more, the latter has been placed in the row below. However, it does not extend and occupy the entire width as it would if the Flexbox Grid had been used.
In the opposite case, we have a five-column container, but by having only three columns, the remaining two proportional spaces have been left empty. Note that these columns are not accompanied by the be-col-x classes.
<div class="be-grid-container-5">
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
.be-grid-container-1
.be-grid-container-2
.be-grid-container-3
.be-grid-container-4
.be-grid-container-5
.be-grid-container-6
.be-grid-container-7
.be-grid-container-8
.be-grid-container-0
.be-grid-container-10
.be-grid-container-11
.be-grid-container-12
A group of images can be included in the Grid Layout container, and they will adjust to the corresponding size and will be completely responsive.
<div class="be-grid-container-4">
<img src="/images/card.webp" alt="image info">
<img src="/images/card.webp" alt="image info">
<img src="/images/card.webp" alt="image info">
<img src="/images/card.webp" alt="image info">
</div>
Grid rows
In beCSS there are several classes to set the number of rows it occupies to a column. For example with the be-grid-row-1-3 class, the column is being indicated to occupy the height of three rows.
<div class="be-grid-container-3">
<div class="be-grid-row-1-2">Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
.be-grid-row-1-2
.be-grid-row-1-3
.be-grid-row-1-4
.be-grid-row-1-5
.be-grid-row-2-2
.be-grid-row-2-3
.be-grid-row-2-4
.be-grid-row-2-5
.be-grid-row-3-2
.be-grid-row-3-3
.be-grid-row-3-4
.be-grid-row-3-5
Grid Layout breakpoint
Column Breakpoint
1-12 28.125em (450px)
≥ 2 34.375em (550px)
≥ 3 41.25em (660px)
≥ 4 46.875em (750px)
≥ 5 53.125em (850px)
≥ 6 59.375em (950px)
≥ 7 61.875em (990px)
≥ 8 64em (1.024px)
≥ 9 70.25em (1.124px)
24 image Grid Gallery
<div class="be-grid-container-12">
<img src="/images/vertical-img-2.svg" alt="image info">
<img src="/images/vertical-img-2.svg" alt="image info">
<img src="/images/vertical-img-2.svg" alt="image info">
<img src="/images/vertical-img-2.svg" alt="image info">
<!--up to 24 -->
</div>
24 image Flex Gallery
For galleries with images of different sizes the Flexbox Layoud offers the best result. You can use the .be-col-x classes to create the different columns of the gallery.
<div class="be-column-container">
<div class="be-col-2">
<img ... >
<img ... >
<img ... >
</div>
<div class="be-col-2">
<img ... >
<img ... >
<img ... >
</div>
<div class="be-col-2">
<img ... >
<img ... >
<img ... >
</div>
</div>
