CssWhat is the use of network systems, we create two basic designs-one that usesFlexbox, another use grid system, try it. WebFront End Learning
UseThe Flexbox build layout actually just helps you put two projects together, which means that it turns all child elements into "pseudo-inline elements" (just presented). This also means that you have to consider how to place HTML elements. Each div-element, is about to become a row of useFlexboxwill become a container. I finally got my basic layout and code:HTML StructureHeaderContentMainContentMainContentFooterContentSidebarContentCssHTML{background: darkred;font-family: ' Avenir '}Footer,Header{Height: 26VH;}. box {Color: darkred;background: RGB (233, 233, 233);text-align: Center;padding: 2em 1em;margin: 5px;}. Maincontainer {Height: 26VH;}. Flex {Display: Flex;}. Contentcontainer {Flex: 2;}Sidebar{Flex: 1;Height: 52VH;}. Flex >Main, Section{Flex: 1;}Now let's look at the grid method.
CSS Grid Layout is the most powerful layout system in CSS. This is a two-dimensional system, which means that it can handle both columns and rows, unlike Flexbox, which is primarily a one-dimensional system. --chris HouseChris House points out the most important difference.(Full text:Https://css-tricks.com/snippets/css/complete-guide-grid/_) _ We can create a two-dimensional layout using the grid! I can go directly into the CSS and decide what it should look like, and you can focus less on the structure when you place the HTML. In general, you can set template rows and template columns, and give them a width and height. In addition, you can decide which column in the row element should start and end. But I've been in Css-grid.has a super-powerful method. It usesGrid-areas. Name eachCSS classes, and create a template directly with these names. Take a look at this://HTML StructureHeaderContentMainContentMainContentSidebarContentFooterContentCssHTML{background: darkred;font-family: ' Avenir '}.gridcontainer {Display: Grid;Grid-gap: 5px;/* WeSetUp a string for eachRowinchThe Layout. Every row has toHave asMany values asThe row withThe most elements have-inchThis CaseRow 2 */grid-template-areas: ' Header header header ' ' main section sidebar ' footer footer side Bar '; Grid-template-rows:32vh 32VH 32VH;}Header{Grid-area: Header;}Main{Grid-area: main;Color: White;}Footer{Grid-area: Footer;Color: White;}Sidebar{Grid-area: Sidebar;Color: white} Section{Grid-area: section;Color: White}.box {Color: darkred;background: RGB (233, 233, 233);text-align: Center;padding: 2em 1em;}we must declare placeholders for each line and set the amount of space that these elements occupy in this row relative to other elements. Conclusion What should you use? It all depends on what you want to build. I wouldn't say grid systems are replacingFlexbox layouts, but they (if you're familiar with this idea) can be used more quickly and help you enforce layouts using parent elements, and do not rely on HTML structures. This works when you use Dynamic Data. However, both allow the use of like Align-itemsorJustify-contentsuch aCSS properties, which are very convenient for a single element, for these ideas, Flexboxmight be a better choice.
What is the use of CSS network systems?
