# Help Using Grid/Flex **URL:** \ **Category:** RapidWeaver Elements\ **Created:** [July 31, 2024, 9:35pm UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026 "2024-07-31T21:35:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [July 31, 2024, 9:35pm UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/1 "2024-07-31T21:35:36Z")
I have been building a features banner in Elements and ran into many issues creating this, mainly around aligning the content when the amount of text varied. I finally devised a solution, as shown in the attached image. But my question is, have I gone overboard using grid/flex, and is there a simpler solution that accomplishes the same result? ![CleanShot 2024-07-31 at 11.22.41@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/c/9c129198e866f103dfe4076a5c638782cedaf6ef.jpeg) The goal with this banner was that all the items had to be the same height, with the icons and titles lined up and the paragraphs taking up the remaining space regardless of length. At first, I tried using containers, but that proved unworkable, so I switched to sections, and things fell into place a lot better. I was using a container in the first place because I needed a colored background. But the container did not resize correctly vertically as the content changed. One of the things that surprised me about the grid component was that it did not provide global options for styling the grid items. This made it a lot harder to do than it should have been. But there is probably a reason I’m unaware of that drove this decision. I’m sure most of my problems stem from my mishandling of things. But I would like to know if the approach I settled on makes any sense. ---
**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\ **Post date:** [July 31, 2024, 10:39pm UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/2 "2024-07-31T22:39:29Z")
Thanks for posting this Robin, looking forward to the responses. ---
**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\ **Post date:** [August 1, 2024, 12:16am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/3 "2024-08-01T00:16:49Z")
Ok, everyone, you have to understand the basic tenants between grid & flex. Grid allows you to set fixed widths for child items. Flex allows items to grow/shrink in width depending on how much content is in a child item. So for uniformity, in your example, you probably would want grid. Bill Stack-Its ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 1, 2024, 12:37am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/4 "2024-08-01T00:37:00Z")
I am using it for that reason. However, I use flex items within the grid items to control the content flow. ---
**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\ **Post date:** [August 1, 2024, 1:12am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/5 "2024-08-01T01:12:21Z")
Hi Robin, Just to show you, this is how I would set it up with just grid. Notice that all the heights match by default. There’s different ways to do things, but I think this is the simplest: ![grid_4col](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/0/8004f53a50e38d80380813b3cf8243b2c97c0cf8.png) ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 1, 2024, 1:26am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/6 "2024-08-01T01:26:21Z")
Aloha Bill, I’ll give that a try but from experience with my current approach I know I;m going to run into a problem with not being able to center the SVG. Which was the reason I used the flex item as it gave me that control. But I’ll try this approach as it is certainly a lot cleaner looking. Thanks for sharing. ---
**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\ **Post date:** [August 1, 2024, 1:42am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/7 "2024-08-01T01:42:42Z")
For the class for the svg (I’m assuming a 64px wide svg) this would be the classes to use: ![center64px_elem](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/7/a72c448ce338b90ba8cbc6f4762c1425aaf96241.png) Note: a base unit size in tailwind is 4px so 16 x 4px = 64px width There’s probably a direct way to set width directly in px, but haven’t figured it out yet. ---
**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\ **Post date:** [August 1, 2024, 1:48am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/8 "2024-08-01T01:48:43Z")
Just figured out how to call out direct px width: 😁 ![center64pxwide_elem](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/1/61f94c774caad6debc0cae3be88468c81d12950b.png) ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 1, 2024, 2:06am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/9 "2024-08-01T02:06:16Z")
Aloha Bill, This is great. I tried this, and it certainly works like a charm and is a lot less complicated. Thanks. ---
**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\ **Post date:** [August 1, 2024, 2:11am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/10 "2024-08-01T02:11:21Z")
Great explanation Bill, Thank you very much! ---
**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\ **Post date:** [August 1, 2024, 2:15am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/11 "2024-08-01T02:15:02Z")
After bon helped me today I tried this tonight to remove some excess components and it’s all working good. Ha! I have so much to learn, it’s taking me away from painting! 🙂 😀 ![painting grid](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/7/c76c763cdb4941c14759000f7d02fa07030f6d1e.jpeg) ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 1, 2024, 2:56am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/12 "2024-08-01T02:56:37Z")
I’ve spent a few hours this morning trying to get my head around how to do things with containers, grids and flexes. Following @dan 's lead I decided to try to reproduce a blog page I liked from Passenger. This is the page: ![Nice blog design](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/3/239dba3ef6380184c72b5511b3255d75cd95e848.jpeg) and this is what I got after a couple of hours: ![Screenshot 2024-08-01 at 12.43.44 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/5/55a0b80b17d9a97cfbdca98434f758254a0fad8c.jpeg) My first attempt (a couple of hours of experimenting and watching Dan on YT), were missing the containers I needed to have white backgrounds behind the grids. It would be so nice to have background colour properties for grids and flexes. Once I realised this I ‘started from the background’ and was able to completely rebuild it in about 15 minutes. It’s clear once you start to understand the structure of the documents it will be considerably quicker to get things done. I think some walk through tutorials will be imperative for beginners as the complexity makes it less than intuitive. Some things are very easy - some are downright confusing. Additionally, I’m finding the WYSIWYG aspect far less than I imagined - I’m living in the node browser and as copy/paste doesn’t appear to be working for components I’m doing all of my duplicating etc in the node browser. It works really well but if beginners think they’ll be doing everything in WYSIWYG I think they’ll be surprised. I’m yet to work out how to get the grids to be properly responsive. When I change screen sizes I imagined the grids would ‘stack’ for a smaller screen but they just squash down to unreadable sizes. Can someone point me to where I can adjust this so it responds correctly? ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 1, 2024, 6:56am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/13 "2024-08-01T06:56:11Z")
I ran into a similar problem until I figured out that I had to override the Columns setting under Sizing, for the Grid. In my case I wanted three columns at the desktop breakpoint so I set the columns to 9 (out of the 12 column grid). to do this I clicked on the little override indicator at the left edge fo the slider. I started with the mobile at 1, which gave me the single stacked column. ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 1, 2024, 10:31am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/14 "2024-08-01T10:31:16Z")
Thanks, I’ll take a look in the morning and try to get it working. BTW, cool fins (old surfer here). ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 2, 2024, 3:05am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/15 "2024-08-02T03:05:40Z")
> [@handshaper](#): > > I ran into a similar problem until I figured out that I had to override the Columns setting under Sizing, for the Grid. In my case I wanted three columns at the desktop breakpoint so I set the columns to 9 (out of the 12 column grid). to do this I clicked on the little override indicator at the left edge fo the slider. > > I started with the mobile at 1, which gave me the single stacked column. I got a little lost because I started at Mobile and there was no over-ride option for columns. It was only when I went to the other sizes I saw they were available there. It really is Mobile first 🙂 Thanks for the tip, I have it working with a grid on a bare test page. I’ll add some elements and try to get it working with content. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 2, 2024, 8:31am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/16 "2024-08-02T08:31:05Z")
> [@trinube](#): > > It really is Mobile first 🙂 Yes! Always think Mobile first, working your way up from the smallest screen to the largest 🙂 ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 2, 2024, 8:40am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/17 "2024-08-02T08:40:51Z")
Is there a way to centre grid items in a grid? I have a grid with four items (2 column each) and want to centre it in the grid. I can force it to centre by adding an additional grid item in front and behind the other items (and leave them empty) but I’m sure I’m missing something. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 2, 2024, 8:51am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/18 "2024-08-02T08:51:18Z")
> [@trinube](#): > > Is there a way to centre grid items in a grid? Yes! It’s under the “Advanced” settings on each Grid item. You set the start and/or end numbers. These settings allow you to move the Grid Item along the x axis. In this example I’m using the Start setting: ![Screenshot 2024-08-02 at 10.42.39](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/b/1b1a3ef5910f294d826b607aedf5bf4225a141e8.png) And here I’m achieving the same thing using the End setting: ![Screenshot 2024-08-02 at 10.44.01](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/0/1001f5431ad7467d51dd1f304387add79e7fa41f.png) This is all “just” CSS grid. We are using the [Tailwind utilities for Grid Column Start / End](https://tailwindcss.com/docs/grid-column) You can do the exact same thing for rows (so you can move the grid item along the y axis) by using the Advanced settings in the Row property control group on each Grid Item. **Note:** these are advanced settings that essentially expose the raw CSS properties to you, meaning it is possible to “break” the Grid item by combining all these settings incorrectly. We will have more tutorials and documentation on this in the future. ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 2, 2024, 9:02am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/19 "2024-08-02T09:02:45Z")
> [@ben](#): > > **Note:** these are advanced settings that essentially expose the raw CSS properties to you, meaning it is possible to “break” the Grid item by combining all these settings incorrectly. 🙂 cool, working without a net ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [August 2, 2024, 9:05am UTC](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026/20 "2024-08-02T09:05:19Z")
> [@ben](#): > > Yes! It’s under the “Advanced” settings on each Grid item. You set the start and/or end numbers. These settings allow you to move the Grid Item along the x axis. Perfect, exactly what I was looking for. It’s working now. I assumed it would be a property of the parent grid rather than the grid item. [Next page](https://forums.realmacsoftware.com/t/help-using-grid-flex/44026.md?page=2)