Suggest an editImprove this articleRefine the answer for “What does the grid-template-columns property do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`grid-template-columns`** sets the structure of columns in CSS Grid, defining how many there will be and the size of each one, using units like `px`, `%`, `fr`, `auto`, `minmax()`, and `repeat()`. **Key point:** the property controls the number and width of columns in a grid container.Shown above the full answer for quick recall.Answer (EN)Image`grid-template-columns` sets **the structure of columns in CSS Grid**, defining **how many there will be and the size of each one**. Examples: ```css .container { display: grid; grid-template-columns: 200px 1fr 1fr; } ``` This creates a grid of **three columns**: the first is fixed (200px), the other two are flexible, one fraction (`fr`) each. Allowed column values: - `px`, `em`, `rem`: fixed units - `%`: relative sizes - `fr`: fractions of free space - `auto`: size based on content - `min-content`, `max-content`, `minmax()`: auto-calculations - `repeat()`: repeating columns, for example: ```css grid-template-columns: repeat(3, 1fr); /* three equal columns */ ``` **Summary:** the property controls the number and width of columns in a grid container.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.