Containers

Containers são fundamentais para organizar e controlar o layout e estilo de uma página HTML. Eles facilitam a criação de designs responsivos e bem estruturados, melhoram a legibilidade do código e a manutenção do site, além de contribuir para a acessibilidade.

Importância dos Containers:

Estrutura e Organização

Containers ajudam a criar uma estrutura lógica e clara para o conteúdo da página. Ao agrupar elementos relacionados, é possível organizar a página de forma mais intuitiva, o que facilita a manutenção e a compreensão do código.

Controle de Layout

Containers são essenciais para o controle do layout da página. Eles permitem a utilização de CSS para definir larguras, margens, preenchimento, alinhamento e outras propriedades que ajustam o posicionamento e o comportamento dos elementos na tela.

Responsividade

Containers ajudam a criar layouts responsivos, ou seja, que se adaptam a diferentes tamanhos de tela (como dispositivos móveis, tablets e desktops). Usando containers, é possível ajustar o conteúdo de forma eficiente para que ele seja exibido corretamente em diversos dispositivos.

Estilo e Design

Eles permitem que estilos CSS sejam aplicados de forma consistente a uma área inteira da página. Isso facilita o design, pois você pode manipular a aparência de uma área inteira sem precisar aplicar os mesmos estilos a cada elemento individualmente.

Container (classe)	Max-Width	Padding-X desktop	Padding-X mobile
.gra-container	1360px	32px	24px
.gra-container-bo	100%	32px	24px
.gra-container-fluid	100%	32px	24px

Exemplos de casos de uso

Container normal

Utiliza-se na maioria das páginas.

                                        
<body>
    <header class="gra-desktop-header large">...</header>
    <div class="pageContent">
        <div>...</div>
        <div class="gra-container">...</div>
        <div>...</div>
    </div>
    <footer>...</footer>
</body>

Container backoffice (com o menu lateral)

Utiliza-se na maioria das páginas no backoffice.

                                        
<body>
    <header class="gra-desktop-header large">...</header>
    <div class="pageContent">
        <div class="gra-d-flex">
            <div class="stickyColumn">
                <div class="gra-menuBackoffice">...</div>
            </div>
            <div class="gra-container-bo">...</div>
        </div>
    </div>
    <footer>...</footer>
</body>

Container fluido

Utiliza-se em páginas em que ocupa toda a largura disponível da tela, independentemente do tamanho da janela do browser. Ou seja, ao contrário de um container fixo, que tem uma largura máxima definida, o gra-container-fluid ajusta-se dinamicamente e estende-se por toda a largura da janela do browser, proporcionando um layout mais flexível e adaptável.

                                        
<body>
    <header class="gra-desktop-header large">...</header>
    <div class="pageContent">
        <div>...</div>
        <div class="gra-container-fluid">...</div>
        <div>...</div>
    </div>
    <footer>...</footer>
</body>