Hi Piotr,
Jewel Grid implements a flex grid column layout based on columns.
By default is configured to 12 columns (check _layout.sass)
$grid-columns: 12 !default
you can change this to other value, but doing that will need to change as
well GridCellLayout MAX_COLUMNS
public static const MAX_COLUMNS:Number = 12;
normally columns in this kind of systems use to be 12 and 24
Then you should have into account that all works with "numerators" /
"denominators"
Since Grid is about responsiveness you hace 4 sizes : Phone, Tablet,
Desktop and WideScreen
each one has its own set of numerator / denominator (i.e: for phones:
phoneNumerator/phoneDenominator)
In this way the interface will adapt automatically to the sizes you set up.
So regarding your question, can we size to percentages? I think not, you
can setup to the closes "grid" column config for example 9/12 and 3/12 for
example:
<j:Grid gap="true">
<j:GridCell desktopNumerator="9" desktopDenominator="12"
tabletNumerator="9" tabletDenominator="12"
phoneNumerator="9" phoneDenominator="12">
<html:Div className="box" text="XXX"/>
</j:GridCell>
<j:GridCell desktopNumerator="3" desktopDenominator="12"
tabletNumerator="3" tabletDenominator="12"
phoneNumerator="3" phoneDenominator="12">
<html:Div className="box" text="YYY"/>
</j:GridCell>
</j:Grid>
This will make all sizes (phone/tablet/desktop) be 9/12 of the width for
first column and 3/12 of the width for second column (and use gap)
HTH
Carlos
El jue., 3 ene. 2019 a las 12:40, Piotr Zarzycki (<[email protected]>)
escribió:
> I initially send that question off list, but it looks like it fits
> perfectly here :)
>
> czw., 3 sty 2019 o 12:38 Piotr Zarzycki <[email protected]>
> napisał(a):
>
> > Hi Carlos,
> >
> > If you think that I should post it on the list let me know. However I
> have
> > a question regarding Grid. I would like to use grid where I have two
> > GridCell.
> > 1. GridCell - Taking 80% of the screen
> > 2. GridCell - Taking 20% of the screen
> >
> > They are displayed one after another. I really cannot achieve that and
> I'm
> > wondering whether it is limitation of that component ?
> >
> > <j:Grid gap="true" itemsVerticalAlign="itemsTop">
> > <j:GridCell desktopNumerator="1" desktopDenominator="2"
> > tabletNumerator="1" tabletDenominator="2"
> > phoneNumerator="1" phoneDenominator="2">
> > <!--Some content-->
> > </j:GridCell>
> > <j:GridCell desktopNumerator="1" desktopDenominator="5"
> > tabletNumerator="1" tabletDenominator="5"
> > phoneNumerator="1" phoneDenominator="5">
> > <!--Some content-->
> > </j:GridCell>
> > </j:Grid>
> >
> > In above code first GridCell have 100% of the screen and second one have
> > 20%.
> >
> > Do you think it's impossible ?
> >
> > Thanks,
> > --
> >
> > Piotr Zarzycki
> >
> > Patreon: *https://www.patreon.com/piotrzarzycki
> > <https://www.patreon.com/piotrzarzycki>*
> >
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
--
Carlos Rovira
http://about.me/carlosrovira
