Step 2

And since we will continue to use this green,

I will name it as a Style called Primary.

Step 3

Next, I will draw a rectangle inside

with a size of 300 by 200 pixels.

Step 4

I will set it to white

and center it.

Step 5

As you can see, this rectangle will always have

a fixed value of 300 and 200 pixels.

Step 6

And even if I add a mobile screen size,

it will still have a size of 300 by 200 pixels.

Step 7

But if I duplicate this rectangle and

change its width value from fixed to relative,

Step 8

The width of this rectangle will then take up 25%

of the entire 1200 pixels, which means it will have 300 pixels.

Step 9

And when the screen size is reduced,

it will have about 97.5 pixels, 25% of 390 pixels,

as a result of the Relative unit.

Step 10

Next time, I will duplicate the page

and move on to a screen with two displays.

Step 11

And I will leave only one rectangle (delete the bottom rectangle).

Step 12

By default, when trying to change the unit of this rectangle's

width to fill, it doesn't work, which is the default behavior.

The reason is that to specify the rectangle's width as fill,

the parent layer that wraps it

must have a Layout property.

Step 13

In other words, this screen layer must

have a Layout property to use the fill attribute inside.

Step 14

So, I have now set the Layout property for the parent layer

and specified the inside rectangle to Fill,

essentially making this rectangle fill the horizontal space.

Step 15

In this layer with the Layout style,

you can also sufficiently use Fixed or Relative.

I will now reduce it back to Fixed 300px.

Step 2

For that reason, I will duplicate the page once more

and take a look through an example.

Delete the layers above.

Step 3

And I duplicate the layer inside

that has a horizontal value of 1fr twice.

Step 4

And then, select the parent layer that wraps these layers

and change the Direction value to horizontal.

Step 5

Then, within this parent layer,

i.e., within 1200 pixels, you have three layers

that have 1fr units (= fill value).

Step 6

As you can see, these layers with fill values

occupy the horizontal space in a precise 1 to 1 to 1 ratio.

This is something that cannot be done with relative units,

automatically dividing the space they occupy

into a 1 to 1 to 1 ratio with the fr unit.

Step 7

Then, what happens if you increase this fr unit from 1fr to 2fr?

As you can see,

they occupy the horizontal space in a 1 to 2 to 1 ratio.

Step 8

And this Layout style is also applicable

to the Height, the vertical length.

I will change the direction of this phone's Layout style

to vertical.

Step 9

I will select all these rectangles and change both their width

and height to 1fr.

Step 10

Then, as you can see,

the rectangles occupy all the available width (mobile screen width).

Step 11

And in the height value they occupy (mobile screen height),

with 1fr, they divide the vertical length

into a 1 to 1 to 1 ratio.

Step 12

Similarly, if you change the height to 2fr,

because it occupies a larger proportion,

they divide the total vertical length

into a 1 to 2 to 1 ratio.

Step 13

I will duplicate the page once more.

Step 14

Thus, in a parent layer with a Layout style,

the Fraction unit is very useful.

Especially when using spacing, gaps inside,

the elements with a fraction unit inside maintain

a 1 to 2 to 1 ratio.

Step 15

And if you apply padding to this Layout style,

the 1 to 2 to 1 ratio is still maintained.

Step 16

Thus, this fraction unit is a very useful unit

that automatically calculates the proportions

of rectangles that are difficult for people to compute.

Step 17

So, what happens if you insert elements

with fixed values instead of this fraction unit inside?

Step 18

I will create a gray rectangle with a 50px

and insert it inside.

Then, you can see

the rectangle fits well inside.

Step 19

I will create one more and paste it.

In this situation, the fraction unit is still powerful,

maintaining a 1 to 2 to 1 ratio while blending well

with these rectangles.

Step 20

And between these rectangles and the larger rectangles,

the specified 10 pixels of gap

and the 36 pixels of padding value

are also maintained as specified.

Step 2

Add one more page,

and I set the color (background color) of this page to a darker green.

Step 3

And inside,

I created a rectangle of 300X200 pixels just like before,

and set the background color to green.

Step 4

And then, specify the Layout style for this 300X200 pixel rectangle.

Step 5

Draw another white rectangle.

Step 6

And set both the width and height

values of this white rectangle to 1fr.

Then, this white rectangle fills up completely.

Step 7

Since I consider this green area as one section,

I will specify a gap and padding value of 20px here.

Step 8

And it would be good to duplicate

the inside rectangle.

Step 9

And make the width 2fr,

so the two rectangles maintain a 1 to 2 ratio.

Step 10

Also, specify the Layout style for the parent

layer wrapping this section.

Step 11

And it would be good if the parent Layout also has suitable padding (36px).

Step 12

Then, add a tablet view.

Then, you can see the same 300X200 pixel

section is created inside.

But this section created inside is

very small compared to this tablet size.

Step 13

Therefore, usually, when creating such section elements,

instead of specifying a width of 300,

specify it in Relative values

to make a section that takes up about 80% length,

making it maintain a similarly large proportion in other screen sizes (tablet).

Step 14

And the elements inside that section maintain a 1 to 2 ratio

using the fraction unit.

When going to a smaller screen,

i.e., mobile size,

Step 15

Instead of using the section in the horizontal direction as is,

create it in the vertical direction.

Step 16

And as done before, increase the vertical proportion to 2

and adjust the length (Height) accordingly.

Step 17

Specify the elements you want to show inside this section

with Relative units when the screen is relatively large,

and specify the proportions using the fraction unit.

Step 2

And like before, specify it as 300px, 200px,

and the inside Child elements

have a 1 to 2 proportion with the fraction unit.

Step 3

But what happens if this parent layer does not have a fixed value

but has this fit content, auto value?

Step 4

If you press it,

you will see the Child's width values (from fr) change to fixed values

because the Auto sizing function itself is based on

the premise that the inside Child must at least have this value,

so if you have used this fraction value

and then set this parent layer to Auto,

you should know that the (inside Child) fraction unit

automatically changes to Fixed.

Step 5

Similarly, if the Child has such fixed values

and this parent layer has Auto Width, Auto Height,