css
  1. css-grid
PreviousNext

CSS Grid

  • The CSS Grid Layout Module offers a two-dimensional grid-based layout system, allowing for the creation of complex and responsive layouts.
  • It provides a powerful way to design web pages, defining both rows and columns within a container.

Basic Usage of CSS Grid

To create a grid layout, apply display: grid; to the parent container and define the layout with properties like grid-template-columns, grid-template-rows, and grid-gap.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
  }
  .grid-item {
    background-color: #63eb96;
    border: 1px solid #000;
  }
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

</body>
</html>
Try Playground

Benefits of Using CSS Grid

  • Robust Layouts: Allows for the creation of more complex layouts than Flexbox, with precise control over rows and columns.
  • Responsive Design: Easily adapts to various screen sizes and devices.
  • Alignment Control: Provides comprehensive alignment options for both rows and columns.

Best Practices for Using CSS Grid

  • Understanding Grid Properties: Learn about grid-template-columns, grid-template-rows, gap, and other grid-specific properties for better control over the layout.
  • Fallback Support: Implement fallbacks or alternative layouts for older browsers to support CSS Grid.

Mastering the CSS Grid Layout provides a robust and efficient way to create intricate and responsive layouts, offering comprehensive control over the arrangement and alignment of elements on a webpage.

FlexboxFont
Published on: