Grid and Flexbox Layout - stretching...
I have a 2 column grid with 2 rows. The first column is set to 30% width and the second to 70% width. I want to put a header in the 1st column and have it stretch across to the second column. The instructions tell me to
You can make the element stretch both through columns and/or through rows. There are two possible ways of doing it. First, you can use the “no unit” values that translate into where the start and end of the element will be, and using “span” which will make the element stretch how many columns/rows you have defined.
I tried both methods and the header will not leave or stretch out of the first column
You can make the element stretch both through columns and/or through rows. There are two possible ways of doing it. First, you can use the “no unit” values that translate into where the start and end of the element will be, and using “span” which will make the element stretch how many columns/rows you have defined.
I tried both methods and the header will not leave or stretch out of the first column
What kind of element is the header? Just text, or text in a container, or an image? I think it will work best with either a container or an image, but if just text, then give it a max-width. Personally, I think the second approach, with 'span' is easier.
Here you can find a wee demo. Just a text header, a paragraph and an image to populate the grid.
https://www.dropbox.com/s/ochrkgkt1i1zv … e.rsd?dl=0
It's all unstyled, no margins/padding or anything else.
Here you can find a wee demo. Just a text header, a paragraph and an image to populate the grid.
https://www.dropbox.com/s/ochrkgkt1i1zv … e.rsd?dl=0
It's all unstyled, no margins/padding or anything else.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Thank you Inger. I am definitely a visual learner. I had put in a container in each of the grid spaces and the element in those containers. Once I took out the containers and followed your example it works flawlessly. You're the best.
Phillip
Phillip
I'm glad I was able to help!

Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.