Missing Col and Row Components in Framework7 React v8, How to Create Flexible Grids in v8?

Hi everyone,

I’ve been using Framework7 React v7 and found the Col and Row components to be great for creating flexible grids by specifying the width of each column as a percentage. However, after upgrading to Framework7 React v8, I’ve noticed that these components are missing and have been replaced with a new Grid system that uses CSS Grid instead of Flexbox.

I’ve been looking through the Framework7 v8 documentation, and I see that it only provides examples of fixed width grids, which is not what I need. In my previous implementation, I used the Col and Row components to create flexible grids by setting the width of each column as a percentage.

However, since the Col and Row components are missing in Framework7 v8, I’m not sure how to create a flexible grid anymore.

Does anyone know how I can create a flexible grid in Framework7 v8 using CSS Grid? I would really appreciate any guidance or resources that can help me get started.

Thank you!

Use custom CSS with custom flexbox, it is super easy to learn and use Flexbox - Learn web development | MDN

1 Like

You are totally correct about Flexbox but your answer is not the most precise one for the question opened up here. Because your answer brings up the question: if flexbox is awesome to use, why is there a GRID system with the latest update?

  1. IMHO the documentation under the “Grid” section should at least mention the flexbox way. That you can use the Grid system together with flexbox or that you should not even think about using “grid” but instead directly learn flexbox.

  2. The DOCS under “grid” should also mention that there is no more individual width-styling like before with “col-5” where 5 equals 5% of width. I still find F7 websites that mention this option and people could try to make it work and will fail hard.

Nevertheless: the latest update is absolutely beautiful and the process of css styling under Android is super interesting.

Try something like this just to get a sneak peak on how to use each one individually. But as i mentioned in the other post of this thread, you can even combine them, you will just have to learn flexbox.

      <div class="display-flex justify-content-space-between align-items-flex-start">
        <div class="flex-shrink-0">Item 1</div>
        <div class="align-self-center">Item 2</div>
        <div class="align-self-flex-end">Item 3</div>
      <div class="grid grid-cols-4 grid-gap">
        <div>Some text in column.</div>
        <div>Some text in column.</div>
        <div>Some text in column.</div>
        <div>Some text in column.</div>

The fact that Row and Col were not taken with them in V8 makes the switch to V8 difficult. Why didn’t you just integrate Row and Col? But simply leaving it out without necessity is incomprehensible?