Meta tags:
description=A propriedade CSS grid-area define o tamanho e a localização dos itens nas linhas do contêiner grid. Veja exemplos e experimente.;

Headings (most frequently used words):

exemplo, grid, com, propriedade, css, area, sintaxe, valores, prática, resultado, números, de, linha, do, valor, itemname,

Text of the page (most frequently used words):
grid (86), div (47), border (34), css (29), text (25), color (25), font (23), style (21), column (21), area (20), background (19), html (17), aprender (15), item (14), width (14), right (13), left (13), template (12), row (12), auto (11), propriedade (11), line (11), class (11), padding (11), start (10), end (10), break (10), para (9), container (9), align (9), title (9), top (9), bottom (9), image (9), animation (9), itemname (8), header (8), position (8), stroke (8), valores (7), linha (7), span (7), box1 (7), size (7), gap (7), footer (7), overflow (7), decoration (7), offset (7), flex (7), page (6), columns (6), qual (6), body (6), head (6), margin (6), type (6), variant (6), w3docs (5), valor (5), areas (5), display (5), exemplo (5), deve (5), main (5), transition (5), last (5), outline (5), radius (5), child (5), formatter (5), todos (4), generator (4), prática (4), sintaxe (4), com (4), copiar (4), property (4), repeat (4), the (4), coluna (4), itens (4), items (4), especificando (4), mode (4), transform (4), fill (4), height (4), list (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), uma (3), definir (3), propriedades (3), colunas (3), elemento (3), tamanho (3), localização (3), define (3), initial (3), especifica (3), nome (3), experimente (3), você (3), center (3), document (3), doctype (3), rows (3), começar (3), terminar (3), contêiner (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), before (3), after (3), max (3), letter (3), content (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), this (2), posicionar (2), área (2), especificar (2), dentro (2), finalidade (2), inherit (2), padrão (2), custom (2), ident (2), aceita (2), mesmo (2), example (2), eee (2), 8ebf42 (2), 555 (2), números (2), também (2), pode (2), linhas (2), ordem (2), palavra (2), chave (2), que (2), box5 (2), box4 (2), box3 (2), box2 (2), name (2), ser (2), usada (2), layout (2), não (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), flow (2), feature (2), empty (2), counter (2), count (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, célula, específica, margem, espaço, entre, herda, pai, seu, usado, onde, começa, termina, número, number, descrição, placing, with, numbers, pelos, das, vez, quatro, seguem, indica, quantas, faixas, ele, cobrir, abaixo, faz, primeira, terceira, cobrindo, assim, seguir, recebe, abrange, todas, cinco, definidas, note, como, apenas, restantes, fluem, automaticamente, próxima, posicionamento, implícito, resultado, you, can, use, ccc, nota, abreviação, menos, forem, fornecidos, ausentes, assumem, finais, element, gridarea, dom, module, level, versão, animável, herdado, aplica, inicial, seguida, nomeados, podem, referenciados, pela, abreviada, seguintes, aplicadas, dos, nas, veja, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, cores, tabelas, links, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
propriedade css grid area w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css grid area a propriedade css grid area define o tamanho e a localização dos itens nas linhas do contêiner grid veja exemplos e experimente a propriedade grid area é usada para especificar o tamanho e a localização do item de grid dentro do contêiner grid é uma propriedade abreviada para as seguintes propriedades aplicadas na ordem row start column start row end column end grid row start especificando a linha na qual o item deve começar grid column start especificando a coluna na qual o item deve começar grid row end especificando a linha na qual o item deve terminar grid column end especificando a coluna na qual o item deve terminar a propriedade grid area também especifica um nome para um item de grid em seguida os itens de grid nomeados podem ser referenciados pela propriedade grid template areas do contêiner grid valor inicial auto auto auto auto aplica se a itens de grid herdado não animável não versão css grid layout module level 1 sintaxe dom element style gridarea 1 2 span 2 span 3 sintaxe grid area grid line grid line grid line grid line custom ident initial inherit copiar nota a abreviação aceita de 1 a 4 valores se menos de 4 valores forem fornecidos os valores ausentes assumem o padrão auto a palavra chave span pode ser usada para os valores finais ex span 2 exemplo doctype html html head title title of the document title style box1 grid area header box2 grid area left box3 grid area main box4 grid area right box5 grid area footer grid container display grid grid template areas header header header header header header left main main main right right left footer footer footer footer footer gap 5 px background color 555 padding 10 px grid container div background color ccc text align center padding 30 px 0 font size 30 px style head body h2 grid area property example h2 p you can use the grid area property to name grid items p div class grid container div class box1 header div div class box2 left div div class box3 main div div class box4 right div div class box5 footer div div body html copiar experimente você mesmo resultado no exemplo a seguir o elemento box1 recebe o valor itemname que abrange todas as cinco colunas definidas no template de grid note que como o grid define apenas 5 colunas os itens restantes fluem automaticamente para a próxima linha posicionamento implícito no grid você também pode posicionar um item pelos números das linhas do grid em vez de um nome os quatro valores seguem a ordem row start column start row end column end e a palavra chave span indica ao item quantas faixas ele deve cobrir no exemplo abaixo grid area 1 1 3 3 faz o item começar na primeira linha e coluna e terminar na terceira linha e coluna cobrindo assim uma área 2 2 exemplo com números de linha do grid doctype html html head title title of the document title style box1 row start column start row end column end grid area 1 1 3 3 background color 8ebf42 grid container display grid grid template columns repeat 4 1 fr grid auto rows 60 px gap 5 px background color 555 padding 5 px grid container div background color eee text align center font size 20 px style head body h2 placing an item with line numbers h2 div class grid container div class box1 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div 7 div div 8 div div body html copiar exemplo com valor itemname doctype html html head title title of the document title style box1 grid area itemname grid container display grid grid template columns repeat 5 1 fr grid template areas itemname itemname itemname itemname itemname gap 5 px background color 8ebf42 padding 5 px grid container div background color eee text align center padding 20 px 0 font size 20 px style head body h2 grid area property example h2 div class grid container div class box1 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div body html copiar experimente você mesmo valores valor descrição grid line especifica a linha do grid onde o item começa ou termina aceita um número span number ou auto custom ident especifica um nome para o item usado com grid template areas initial define a propriedade com seu valor padrão inherit herda a propriedade do elemento pai prática prática qual é a finalidade da propriedade css grid area qual é a finalidade da propriedade css grid area especificar o tamanho e a localização de um item de grid dentro do grid definir o template de grid para um elemento html definir o espaço entre colunas do grid definir as propriedades de margem no css posicionar um item em uma célula ou área específica verificar was this page helpful yes no previous grid next grid auto columns on this page sintaxe valores prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores