CSS Grid Layout
Criando layouts CSS profissionais
Descrição do livro
A criação de Layout CSS sempre foi uma tarefa trabalhosa, mas agora os profissionais têm uma ferramenta poderosa ao seu alcance, o CSS Grid Layout, uma nova especificação do W3C, que veio para resolver praticamente todos os problemas de posicionamento na tela. Utilizando um novo método de layout CSS, bidimensional, com linhas e colunas, mais simples e muito mais fácil de usar, permite controlar o tamanho e a posição dos componentes da interface e seus conteúdos. Não será mais necessário inflar a marcação HTML com elementos desnecessários para a criação de layouts CSS.
Explicações teóricas são abordadas em linguagem didática, dispensando, sempre que possível, o jargão técnico avançado, além de serem acompanhadas de exemplos práticos explicados passo a passo e complementados por arquivos HTML, disponíveis online para consulta e download.
Neste livro, Maujor, o dinossauro das CSS, mostra de forma didática os recursos e as funcionalidades dessa nova ferramenta. Com auxílio de exercícios práticos, você aprenderá todas as potencialidades dessa nova tecnologia para criar layouts extremamente profissionais, que antes somente eram possíveis com a utilização de frameworks.
Este livro é indicado para desenvolvedores front-end, web designers e estudantes com alguma experiência em CSS.
Ver menos ▲Sumário
- Agradecimentos
- Isenção de responsabilidade
- Sobre o autor
- Introdução
- Capítulo 1 ■ Introdução e terminologia
- 1.1 Introdução
- 1.2 Terminologia
- 1.2.1 CSS Grid Layout
- 1.2.2 Terminologia do Grid Layout
- Capítulo 2 ■ Criando o grid e posicionando os grid items
- 2.1 Marcação HTML
- 2.2 Propriedades para o grid container
- 2.3 Propriedades para posicionamento dos grid items
- 2.3.1 Quantidade de valores para definir as grid lines
- 2.4 Dica de posicionamento numérico
- 2.5 Grid explícito
- 2.6 Grid implícito
- 2.6.1 Dimensionamento do grid implícito
- 2.7 Posicionamento automático no grid
- 2.7.1 Alterando o posicionamento automático
- Capítulo 3 ■ Sintaxes para posicionamento no grid
- 3.1 Marcação HTML
- 3.2 Posicionamento com grid lines nomeadas
- 3.3 Posicionamento com uso da palavra-chave span
- 3.4 Posicionamento com áreas nomeadas
- 3.4.1 Valores para a propriedade grid-template-areas
- 3.5 Posicionamento numérico combinado com linhas nomeadas
- 3.6 Palavra-chave auto
- 3.7 Palavra-chave dense para posicionamento
- Capítulo 4 ■ Dimensionamento do grid
- 4.1 Valores CSS para dimensionamento do grid
- 4.1.1 Unidades relativas de medida CSS
- 4.1.2 Unidades absolutas de medida CSS
- 4.2 Função repeat()
- 4.3 Unidade de medida CSS fr
- 4.4 Função minmax()
- 4.5 auto-fill e auto-fit
- 4.6 min-content e max-content
- 4.1 Valores CSS para dimensionamento do grid
- Capítulo 5 ■ Grid items
- 5.1 Elementos-filhos do grid container
- 5.1.1 Contexto de formatação em modo grid
- 5.1.2 Reordenamento dos grid items
- 5.1.3 Margens e padding dos grid items
- 5.1.4 Propriedade z-index para grid items
- 5.2 Alinhamentos
- 5.2.1 Alinhamento do grid
- 5.2.2 Alinhamento dos grid items
- 5.1 Elementos-filhos do grid container
- Capítulo 6 ■ Detalhando o grid
- 6.1 Subgrid
- 6.2 Grid aninhado
- 6.3 A função minmax e o grid responsivo
- 6.4 Grid gaps com colunas e linhas
- 6.5 Grid gaps com larguras diferentes
- 6.6 Propriedade CSS position para grid items
- 6.7 Propriedade grid-template
- 6.8 Nome implícito para as linhas do grid
- 6.9 Propriedade grid
- 6.10 Grid para cards
- Capítulo 7 ■ Layouts
- 7.1 Exemplo 1 – Layout de duas colunas
- 7.2 Exemplo 2 – Layout de duas colunas
- 7.3 Exemplo 3 – Layout de duas colunas
- 7.4 Exemplo 4 - Layout de três colunas
- 7.5 Exemplo 5 – Layout Novatec
- 7.5.1 Primeiro passo – marcação HTML
- 7.5.2 Segundo passo – Mobile First
- 7.5.3 Terceiro passo – Primeiro breakpoint
- 7.5.4 Quarto passo – Segundo breakpoint
- 7.5.5 Layout da Home Page da Novatec
- Apêndice A ■ Grid developer tool
- A 1 Firefox Nightly
- A 2 Inspetor do grid
- A 2.1 Nota importante
- Apêndice B ■ Flexbox
- B 1 Introdução
- B 2 Terminologia
- B 2.1 Flex container
- B 2.2 Flex item
- B 2.3 Eixos
- B 3 Propriedades CSS para o flex container
- B 4 Propriedades CSS para os flex items
- B 5 Cards com flexbox
- Referências bibliográficas
- Índice remissivo
Sobre o autor
Maurício Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). Exerceu o magistério paralelamente à Engenharia e foi professor de Geometria Descritiva e Matemática. Sua experiência com desenvolvimento iniciou-se em 1999. Em 2003 lançou o site https://maujor.com, que se tornou referência nacional em CSS, com a… Ver perfil completo ▶
Livros relacionados
Opinião dos leitores
Ricardo B
Falar de Maurício Samy Silva é o mesmo que falar de Ricardo Lecheta, conhecimento incrível e didática fantástica. Compro os livros do Maurício mesmo se eu não precisar no momento, pois sei que acertei no investimento e assim que eu ler vou compreender perfeitamente e aprender muito. Já estou na espera da sua próxima obra.
Ronaldo A A M
Muito bom, mais um excelente trabalho do Maujor e da Novatec. Parabéns a todos os envolvidos, me ajuda muito na dia a dia do serviço.
Daniele da C
Olá, terminei de ler o livro faz pouco tempo e apreciei muito a leitura. Aprendi o Grid Layout de uma forma leve, didática e prática. Com certeza utilizarei o conhecimento adquirido em futuros projetos. Super recomendo! Parabéns ao autor pelo excelente livro!
Edimara B F
Livro muito bom.