Intro
More responsive website content today! I'm going to be going over very briefly CSS grid and Flex box since they are a pretty big part of responsive websites. These concepts are sometimes very hard to understand with words alone. I encourage everyone to take a look at the websites I link today and there are even games that well help you understand the concepts
CSS Grid
There are two main concepts when it comes to CSS grid. There is the parent which is the container for all the grid items. Then there are the grid items which will be all the children of the CSS gird container. Now the container will be your gird. The first thing you will need to do is in CSS set your display of the container to grid or inline-grid. This will make sure that your element is a grid. Next set up the grid-template-columns and grid-template-rows. These names will tell the system how many columns and rows you want inside the grid. You will have to add in widths and heights for these each width will be a new column. If you have seven widths you will have seven columns. Next you can set up your gaps by using one of the four name to set in CSS column-gap, row-gap, grid-column-gap, or grid-row-gap. That's the very basics of the container, and when I say the very basics I mean it.
Flex Box
Flex box also has a container and flex items. The container will be shown by making the display flex. You can set the flex-direction which will tell the computer which way your containers are to be aligned. Also the wrap can be defined with flex-wrap. This will tell the computer what to do in the case the items hit the end of the container. Once you set that you can set justify-content. This will either move everything to the left, right or center. If you want there is also space-between, space around, and space-evenly.
With flex-items everything will be sized by numbers. With flex-grow or flex-shrink the items will change size. If every item is 1 they will be the same size. Alternatively if one item is set to 2 and the other items are set to 1 the first item will be twice the size.
That is the very very basics of both flex box and CSS grid. There is so much more that can be learned and you should take the time to learn. I really think you should take a look at the links and play the games! Tomorrow I'll be taking a look at my website and trying to make everything a little bit more responsive. This may take more than one day.
