RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout below:

CSS grid layout - CSS

The example shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

This sample animation uses display, grid-template-columns, grid-template-rows, and gap to create the grid, and grid-column and grid-row to position items within in the grid. To view and edit the HTML and CSS used, click the 'Play' at the top right of the example.

Reference Properties

Functions

Data types and values

<flex> (fr unit)

Terms and glossary definitions

Guides

Basic concepts of grid layout: An overview of the various features provided in the CSS grid layout module.
Relationship of grid layout with other layout methods: How grid layout fits together with other CSS features including flexbox, absolutely positioned elements, and display: contents.
Grid layout using line-based placement: Grid lines and how to position items against those lines, including the grid-area properties, negative line numbers, spanning multiple cells, and creating grid gutters.
Grid template areas: Placing grid items using named template areas.
Grid layout using named grid lines: Combining names and track sizes; placing grid items by defining named grid lined and template areas.
Auto-placement in grid layout: How grid positions items that don't have any placement properties declared.
Aligning items in CSS grid layout: Aligning, justifying, and centering grid items along the two axes of a grid layout.
Grids, logical values, and writing modes: A look at the interaction between CSS grid layout, box alignment and writing modes, along with CSS logical and physical properties and values.
Grid layout and accessibility: A look at how CSS grid layout can both help and harm accessibility.
Realizing common layouts using grids: A few different layouts demonstrating different techniques you can use when designing with CSS grid layouts, including using grid-template-areas, a 12-column flexible grid system, and a product listing using auto-placement.
Subgrid: What subgrid does with use cases and design patterns that subgrid solves.
Masonry layout: Details what masonry layout is and it is used.
Box alignment in CSS grid layout: How box alignment works in the context of grid layout.

CSS display module

CSS box alignment module

CSS box sizing module

Specifications See also

CSS flexible box layout module
CSS display module
Grid by example
CSS grid reference via Codrops
Firefox DevTools: grid inspector
CSS grid playground
CSS grid garden - A game for learning CSS grid

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.5