Alguém poderia me dar um resumo como q funciona os posicionamentos grid, fiquei meio perdido, msm vendo a aulas
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém poderia me dar um resumo como q funciona os posicionamentos grid, fiquei meio perdido, msm vendo a aulas
Olá Anderson!
O posicionamento grid é um sistema de layout em CSS que permite criar layouts complexos e responsivos com facilidade. Ele divide a página em linhas e colunas e permite posicionar os elementos em células da grade.
Aqui está um resumo de como funciona o posicionamento grid:
Container do Grid:
Primeiro, você precisa definir um container como um elemento pai para os itens que deseja posicionar usando o grid. Para isso, você pode definir o container com a propriedade display: grid;.
Definindo as linhas e colunas:
Em seguida, você define as linhas e colunas da grade usando as propriedades grid-template-rows e grid-template-columns. Você pode usar unidades como pixels, porcentagens ou frações do espaço disponível para definir a largura e altura das linhas e colunas.
Posicionando os itens:
Agora é hora de posicionar os elementos dentro das células da grade. Você pode fazer isso usando as propriedades grid-row-start, grid-row-end, grid-column-start e grid-column-end. Com essas propriedades, você pode definir a posição inicial e final de um item em termos de linhas e colunas da grade.
Grid Areas:
Outra maneira de posicionar os itens é usando grid areas. Você pode criar áreas nomeadas usando a propriedade grid-template-areas no container do grid e, em seguida, associar cada item a uma área específica usando a propriedade grid-area.
Alinhamento:
O grid também permite controlar o alinhamento dos itens horizontalmente e verticalmente usando as propriedades justify-items, align-items, justify-content e align-content.
Responsividade:
O posicionamento grid é ótimo para criar layouts responsivos. Você pode usar as propriedades grid-template-columns e grid-template-rows com as unidades "fr" para definir colunas e linhas que se ajustam automaticamente ao espaço disponível.
Aqui está um exemplo básico de como criar um grid com três itens:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 colunas com tamanhos proporcionais */
grid-template-rows: 100px 200px; /* 2 linhas com alturas fixas */
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.item3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
}
Esse é apenas um resumo básico, mas o posicionamento grid oferece muitas possibilidades para criar layouts flexíveis e responsivos. À medida que você se familiariza com ele, poderá explorar mais opções, como alinhamento, grid areas, grid templates e muito mais.
Continue praticando e experimentando para se tornar mais confortável com o posicionamento grid. Com o tempo, você verá como essa técnica pode facilitar a criação de layouts complexos e modernos em suas aplicações web.