Flex Grid; 200px high 200px wide, blue (size and color set in child tab), no wrapping or alignment (default)
Flex Grid; 3x3 1fr grid, gap: 15px.
Elements set in child tab of parent container: min width 200px, min height 100px, color and radius
**must have something in one of the boxes, or a min size set on parent container/one child container or it won't show up
**For some reason changed background color on smaller breakpoints on its own?
Text centered via its own box settings
Text
Flex Grid; 3x3 grid, 2fr 1fr 1fr x 1fr 1fr 1fr; gap: 15px.
Elements set in child tab of parent container: min width 200px, min height 100px, color and radius
**must have something in one of the boxes, or a min size set on parent container/one child container or it won't show up
**For some reason changed background color on smaller breakpoints on its own?
Text centered via its own box settings
Text
Flex Grid; 300px x 1 fr
Side bar
Main content
Flex Grid; 3 1fr columns, auto row
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar. Proin viverra nulla dolor, eget tristique lorem tempus id. Morbi vehicula elit non risus vestibulum elementum.
Flex Grid; Bento grid (manual responsive editing)
Flex Grid; Auto Columns and Rows
Child tab settings: 300px H 300px W; min 300px max 400px
Not sure what auto is doing, seems like normal?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar.
Flex Grid; Grid stacking (basically the same thing as the "layers")
1st column: layers within child box
2nd column: 2 stacked columns
Fresh Apples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar.
Fresh Apples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, tortor luctus porta auctor, quam justo gravida arcu, nec pretium turpis libero vitae leo. Aenean venenatis lorem sed ante finibus, non gravida purus pulvinar.
Wrapping grid 1st attempt
Wrapping grid 2nd attempt
Added this CSS code to Global Settings:
.my-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Parent box settings: left columns and rows blank, added 25 px gap
Then on child tab of parent box: min 300px max 500px width,
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound
Apples for sale
$1.50/pound