What is CSS Grid Layout?
Turkish: CSS Grid
CSS Grid is a CSS layout system for building flexible, responsive two-dimensional web layouts across rows and columns.
What is CSS Grid Layout?
CSS Grid is a CSS module for building two-dimensional layouts by defining rows and columns together. Flexbox is strongest for one-axis alignment; Grid is better for card lists, dashboards, galleries, and page sections that need both horizontal and vertical structure.
Inside a grid container, CSS controls column widths, row heights, gaps, and how many cells each item spans. The visual layout can change without changing the semantic order of the HTML.
How Does It Work?
A grid layout starts with display: grid. Core tools include grid-template-columns, grid-template-rows, gap, grid-column, grid-row, minmax(), and the fr unit. Patterns such as repeat(auto-fit, minmax(240px, 1fr)) are often used to adapt the number of columns to the viewport.
Concepts such as grid lines, tracks, cells, and areas make complex layouts easier to name and maintain. With grid-template-areas, a page can define regions such as header, sidebar, content, and footer.
Business Use
CSS Grid is used in admin dashboards, product listing pages, pricing tables, media galleries, and complex landing page sections. In design systems, it helps keep cards aligned and responsive breakpoints manageable with less custom CSS.
It is a key part of layout work in CSS. When it is not planned together with responsive design, smaller screens can still suffer from overflow or readability issues.
Related Terms
A container query lets CSS change a component's styles based on its container size instead of the browser viewport width.
CSS (Cascading Style Sheets)CSS defines the visual presentation of HTML, including colors, typography, spacing, layout, and responsive behavior in browsers.
CSS FlexboxFlexbox is a CSS layout model for aligning items on one axis, distributing space, and adapting to changing content sizes.
Responsive DesignResponsive design adapts one web interface to different screen widths, input methods, and device capabilities without separate mobile pages.