Struggling with a grid based table layout

Design help General
1

Hello, everyone. My name is Mukul and I am thinking someone could run some magic and tell me where I am doing wrong. Here is the “table” which I am creating using Grids. . And the section where it says Locality, since the data will come from a form it can get bigger than what text I have put. So I have given a max width to the text div so that any longer text would come down (so width doesn’t increase and only height increases). But when I try putting longer text for short increments like adding 10-15 characters, expected behaviour is happening but when I try adding 100 characters extra the height is not increasing and the width is getting increased and text overflowing to the next entry. Uploading another pic for clarification
. Can someone please help me fix this?

I have tried using overflow auto(it works fine) but I do not want a scrolling container I wanted just the height to increase accordingly. Sharing my webflow link

https://preview.webflow.com/preview/admin-dashboard-localwell?utm_medium=preview_link&utm_source=designer&utm_content=admin-dashboard-localwell&preview=cc21b22f3037d8cad3a157a4a301d275&pageId=5dbd73f9422ff6ade3d77822&mode=preview

And if you have any suggestions for the table I created(beginner here) do let me know. Thanks!

2

You grid is wrong (You should create table with one and only one grid (Otherwise the cols size will not match)).

image
image1923×574 57.6 KB

image
image1253×359 43.7 KB

About the size of the col:
use auto fr or use min-width for some col (The text inside by deafult wrap lines related to the size available)

Mobile

Keep in mind on mobile you will get “chaos” (Table by grid is not so optimal on mobile). The best idea her is to create overflow-x scroll

image
image1922×700 69.4 KB

and one line (before head):

<style>
.overflow-x{
  overflow-x: scroll;
}
</style>

https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

word-break

word-break property not avaibale (yet) by webflow designer (Use custom code).

If you write very long word (One word only in a col):
drfgert345345345egdfbgdfgdfg3e45tdfgedrtg3e4t5
set word-break to break-all
https://www.w3schools.com/cssref/css3_pr_word-break.asp

3

Thanks for helping! I will try what you suggested and will let you know, right now trying to understand and implement what you said.

4

For table in general you should use max/min (Otherwise its hard to control the width of the content inside):

image
image1286×313 28.8 KB

And again - the “very long word” - give more space for the col / or add one line of custom css:

<style>
.very-long-word {
  word-break: break-all;
}
</style>

university

Follow webflow docs (And create the examples).
You find a little learning curve for this issue.

Also great course:

Tutorials

Read this:

5

The reason I used multiple grids because I thought how would I style the table Headings row, for example if I wanted to make the table heading whole 1st row bg color of lightish grey so it looks different from the entries below it, how would I do that? If I apply bg color to the first row won’t it apply to all the rows? Again, I am just asking because I want to learn. Right now if I try to assign bg color by setting the same class to the headings, the weird white colour gap is getting left. Like this

6

Amazing I applied the word break and it works! I am so happy! Also your explanations cleared so many doubts regarding the grid. Thanks a lot!!! By the way it doesn’t show in the Designer(after adding custom code) but when I publish, it shows!

1 Like
7

You can use embed and put your style there. It will show inside designer then.

1 Like
8

Nice tip :slight_smile:

9

Gap setting her:
image