CSS Grid layout
CSS Grid layout ou CSS Grid é uma técnica em Cascading Style Sheets que permite que os desenvolvedores da Web para criar layouts de Design Web responsivo complexa mais facilmente e consistentemente através de navegadores.houve outros métodos para controlar os métodos de layout de página da Web, como tabelas, o modelo de caixa e a caixa Flex CSS. O CSS Grid layout não é atualmente um padrão oficial (é uma recomendação do candidato W3C), embora tenha sido adotado pela maioria dos principais navegadores.
A grade CSS pode criar layouts mais assimétricos do que as opções de grade e layout anteriores, como flutuadores CSS. Ele também permite um código mais padronizado que funciona em navegadores. Isso é em contraste com depender de hacks de navegador específicos ou soluções complicadas.
Um problema com a exploração de flutuadores em CSS é que se o conteúdo for adicionado a uma parte da página, ele poderá interromper o fluxo da página e quebrar o layout. Isso se deve às diferentes alturas dos elementos de layout.embora CSS Flex box suporta layouts flexíveis e fornece a flexibilidade de criar layouts complexos como os templates de loja virtual, ele falha quando a necessidade de criar layouts responsivos no espaço 2-dimensional surge. Este é um caso em que o layout de grade CSS oferece vantagens.
A partir de outubro 2017, Chrome, Firefox, Safari e Edge todos suportam grade CSS sem prefixos de fornecedor. 4 5 IE 10 e 11 suporte CSS Grid, mas com uma especificação ultrapassada. Em dispositivos móveis, todos os navegadores modernos suportam a grade CSS, exceto o Opera Mini e o UC Browser. Os desenvolvedores da Web que segmentam navegadores mais antigos podem utilizar o Modernizr 3.5.0 para detectar e degradar graciosamente a página da Web conforme necessário.
Não existem frameworks web atuais que incorporam a grade CSS em contraste com a caixa Flex CSS que é usada em frameworks como o bootstrap 4 e o Foundation 6.