Is it appropriate to use grid layout and use it in production now (2018)?

< H2 > Preface < / H2 >

the front-end time to go out for the interview, because I wrote on my resume that I usually use the flex layout, and the interviewer asked me why I didn"t use the grid layout. At that time, I replied that it was because of compatibility, and then the interviewer asked me how different the compatibility of the two was. To be honest, I saw his compatibility in 17 years, when there were almost no browsers.

then I went back to check and found that the compatibility of grid is much better now, almost the same as flex , so I would like to ask if I can use grid when I use flex for production. It seems that it is rare to use grid for layout nowadays.

Css3 css

Mar.31,2021

for mobile devices, you can consider introducing grid. After all, the mobile phone is updated quickly and the browser compatibility problem is not so serious.
you ask this question as if flex and grid can only choose one of the two. They should be combined to give full play to their respective advantages, such as

flex is perfect for centring (especially vertical centering) and for one-dimensional distribution of elements (how to distribute on a line).
if it involves a two-dimensional (multi-row, multi-column) determined layout, use Grid.
when it comes to responsive page elements, using flex + width percentage widths is simply too easy to use because of flex's natural streaming layout.

for the difference between the two, take a look at the article " CSS Ultimate Battle: Grid vs Flexbox ", which is well summed up

Previous: The problem of selecting Foreign key in Database

Next: After async.map processes the data, it uses render to render in the callback function, and the page reports an error. The not found, console did not report an error.

Let table be able to separate different colors?
want to explain how to make table different colors? is not different. is . <table> <tr> <td width="100">a< td> <td><a>< td> < tr> <tr> ...

Jquery css3 css html5 table

Feb.26,2021
Vue page switching fixed positioning problem?
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...

Css3 css html5 vue.js

Feb.27,2021
Is flex compatible with ie9 when using postcss?
is flex compatible with ie9 when using postcss? ...

Css3 css

Feb.27,2021
Will the use of font-family in the pc page css cause font infringement?
does the use of font-family in the pc page css cause font infringement ...

Html5 html css3 css web

Feb.28,2021
Seems to have found a BUG? with a Chrome memory leak.
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...

Javascript html5 css3 css3-Animation

Feb.28,2021
Whether the border of table can be controlled in this way.
for example, can there be a gray between payment and order price , but if this gray line is not all , then it is about 80% and then put it in the middle . Can this be done ? Update every line is only 80% . ...

Css3 css html5 table

Feb.28,2021
Animation-play-state:paused pauses animation ios is invalid
ios11 system, Wechat and browser are not good, animation cannot be paused at the beginning, and no problems are found in computer or qq <div className="c-Random-started" onClick={this.randomVisible} style={this.state.clickonthe...

Css3 css3-Animation react.js css javascript

Feb.28,2021
How can react pause / resume animation?
AnimationPlayState: paused fails on ios, so I m going to abandon it. I see a divine solution https: codepen.io HaoyCn pen., but I don t know how to write it on react, ask for advice! <div style={this.props.clickonthe ? { AnimationPlayS...

React.js css3 css javascript

Mar.01,2021
How to choose the Chinese characters provided by Google?
https: fonts.google.com spec.:400,500,500i,700 https: fonts.google.com specimen Ubuntu?selection.family=Ubuntu:400,500,500i,700 I choose Ubuntu and then I check regular 400 and I introduce it to the web site and write it like this . font-family: ...

Css3 css google font-family font

Mar.01,2021
Sass code of mobile 1px problem
first of all, in my understanding of the 1px frame, the reason for this problem is that in some high-definition screens, one css pixel corresponds to multiple physical pixels, which makes it look thicker when the frame is set to 1px. For example, for tw...

Sass css3 css

Mar.01,2021
After you change the scroll bar style, the default scroll bar area width cannot be canceled
figure 1 shows the effect of modifying the scroll bar style code in figure 2 , but you can see that there is still a color area on the left that is the default width of the scroll bar excuse me, how to cancel this part ...

Html5 html css3 css

Mar.01,2021
Occasionally, the first screen rendering does not load the css file, but renders normally after a page refresh
is usually the first time to visit the page, or after cleaning up the browser data, there will be a problem, there will be no problem after refreshing (click events can be used..), the path is nothing. The 50kb of the css file is about large, but the fi...

Css3 css react.js javascript

Mar.02,2021
The page of 1920 design draft, how to solve the problem that the font becomes bigger under the low split screen such as 1366? .
as the title, the pc page is based on the 1920 design draft. Now it is found that the font is very large under the low split screen such as 1366. How to solve this problem? .. you don t need to adapt to the mobile end, you just need to look better on ...

Front-end javascript css3 css html

Mar.02,2021
How to blur the div area? Css filter
.saveresult { font-size: 13px; position: fixed; box-shadow:0 0 5px 3px rgba(0,0,0,.09); background-color: rgba(0,0,0,.1); border-radius: 20px; padding: 10px; width: 300px; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-...

Filter css3 css html5 html

Mar.03,2021
How to make a menu that appears from the right and has a slippery feel?
want to find an example of a list click on a list of Tibetan dishes that can click on the right button to appear to the left and then go back to the right when you take it back I don t know what keywords to use to check what is the name of this tec...

Jquery javascript css css3 css3-Animation

Mar.03,2021
@ media compatible?
in the figure, the landing box is fixed relative to the vertical and horizontal center of the screen fix, and the width and height is a fixed value. is the same size as the blueprint on 1920-1080, but it becomes very large on the 13-inch screen of m...

Css3 css html5 html+css+js

Mar.03,2021
Put in the icon, when you press the button, but press the button itself.
<button class="add_tab_v2" onclick="location.href= xxx.php ;">< button> $(".add_tab_v2").click(function(e) { $(".add_tab_v2").html("<img class= iconBack src= images loading_v2.svg >...

Jquery javascript css css3 css3-Animation

Mar.04,2021
Why does div overwrite the div element of position='fixed' after setting position='relative'?
in the html document, there are some div that need to be set position= relative . Today, you need to add a pop-up box. The implementation code is as follows: <div class="dialog-wrap" style="width: 400px;"> <!-- ...

Css3 css

Mar.04,2021
Why does the circle I draw with css gradient look like this?
as shown in the following picture, it s not round at all. Please help me to see if there is something wrong with my code html <div class="box">< div> css .box{ position: relative; width: 300px; height: 140px; ...

Html css3 css javascript

Mar.04,2021
How does the picture on the front page of elementUI's official website move slightly as the mouse moves?
suddenly found that the element official website here with the mouse slide picture will change slightly is very interesting, but suffering from css learning skills is not good, can anyone post this related implementation of a program code to facilitate l...

Element-ui css3 css3-Animation

Mar.04,2021