Okuzeka
Web Development vocabulary · CSS and Layout

CSS grid

Meaning in web development, with examples

nounCommon term

In web development, CSS grid means: A CSS layout system for placing elements in rows and columns at the same time, useful for full page layouts and card galleries.

In Turkish: CSS grid, ızgara düzeni

How it is used

Turned on with display: grid. Developers define columns and rows (grid-template-columns), use the fr unit and name grid areas. Often just called 'grid': 'Let's do this with grid.'

Example sentences

  1. With CSS grid, the gallery shows four columns on desktop and two on tablets.

  2. I rebuilt the dashboard with CSS grid and removed half of the wrapper divs.

Common collocations

  • grid layout
  • grid template
  • grid area
  • fr unit
  • display: grid
  • flexboxA CSS layout method for arranging items in a single row or column and controlling how they grow, shrink, align and share space.
  • layoutThe way elements are arranged on a page: where columns, menus, images and text sit and how they move when the screen size changes.
  • responsive designAn approach to building pages so that the same layout adapts to any screen size, from phones and tablets to large monitors.
  • CSSCascading Style Sheets: the language that controls how HTML looks, including colors, fonts, spacing, layout and animations.

This word in other fields

The same English word can have a different meaning in another field:

More terms: CSS and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: