Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use CSS Grid layout to make browsers open CSS Grid Layout". In daily operation, I believe many people have doubts about how to use CSS Grid layout to make browsers open CSS Grid Layout. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to use CSS Grid layout to make browsers open CSS Grid Layout"! Next, please follow the editor to study!

Browser compatibility

Let's first recall the extent to which several major browsers support the CSS Grid Layout module:

Without too much elaboration from the above picture, it can be said that it is clear at a glance, but it is gratifying to note that IE, which has not been effective all the time, has enabled the module function of CSS Grid Layout by default from the IE10 version.

Open the CSS Grid Layout module function of the browser

So far, several major browsers mainly include:

Chrome Safari Internet Explorer Opera Firefox

Of course, students who like to pursue new things will also observe:

Chrome CanaryWebkit NightlyOpera NextFirefox Aurora

In addition to IE10+ 's default support for CSS Grid Layout module functionality, other browsers such as Chrome, Safari, Opera, and Firefox need to be reset (enabling experimental network platform features in development).

Chrome browser

At the time of writing this article, I used the Chrome browser version "Chrome 38.0.2125.101". It is relatively easy to open the CSS Grid Layout module in the Chrome browser. Just type: chrome://flags in your browser's address bar, and enter to find "enable experimental network platform features" (# enable-experimental-web-platform-features) in the list. A simpler method is to enter the URL: chrome://flags#enable-experimental-web-platform-features immediately locate the required options in the browser's address bar. Then click the enable button, as shown in the following figure:

After opening it, remember to restart your browser. In order to make it difficult for you to open it successfully, you can open this Demo in your browser. If you can see the effect similar to the following figure, it means that it has been enabled successfully, you can do CSS Grid Layout-related learning and demonstration.

Opera browser

Opera browsers open CSS Grid Layout in the same way as Chrome. Type opera://flags in the URL bar of the Opera browser, and find # # Enable experimental Web Platform features (or type opera://flags/#enable-experimental-web-platform-features directly), and click the "Open" button:

Restart your browser to use the CSS Grid Layout feature.

Note: the version of Opera I tested was "Opera25.0.1614.50".

Safari (Webkit) browser

Since April 2, 2014, the CSS Grid Layout module has been built into Webkit Nightly by default. For more information, please click here.

Firefox browser

Unfortunately, so far, I haven't figured out how to open the CSS Grid Layout module in a Firefox browser. If you know how to turn on the relevant functions in the Firefox browser, please give me some advice.

At this point, the study on "how to use CSS Grid layout to enable browsers to open CSS Grid Layout" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.