{"id":15066610,"url":"https://github.com/deoostfrees/gibki","last_synced_at":"2026-04-18T17:04:07.206Z","repository":{"id":44881209,"uuid":"408114656","full_name":"deoostfrees/Gibki","owner":"deoostfrees","description":"An open source grid system based on Flexbox using container queries.","archived":false,"fork":false,"pushed_at":"2025-03-28T19:18:18.000Z","size":306,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T17:01:31.058Z","etag":null,"topics":["css","dependency-free","flexbox","grid-system","sass"],"latest_commit_sha":null,"homepage":"https://codepen.io/deoostfrees/pen/GREYYJa","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deoostfrees.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["deoostfrees"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-09-19T11:57:49.000Z","updated_at":"2025-03-28T19:19:05.000Z","dependencies_parsed_at":"2023-11-10T21:25:22.177Z","dependency_job_id":"5037ebfc-ec93-423a-bb21-1fbfb3c67815","html_url":"https://github.com/deoostfrees/Gibki","commit_stats":{"total_commits":55,"total_committers":2,"mean_commits":27.5,"dds":"0.054545454545454564","last_synced_commit":"df9c1b8d230f5173db5786ef1cd651f354264535"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoostfrees%2FGibki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoostfrees%2FGibki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoostfrees%2FGibki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deoostfrees%2FGibki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deoostfrees","download_url":"https://codeload.github.com/deoostfrees/Gibki/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248226397,"owners_count":21068195,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dependency-free","flexbox","grid-system","sass"],"created_at":"2024-09-25T01:09:52.093Z","updated_at":"2026-04-18T17:04:07.198Z","avatar_url":"https://github.com/deoostfrees.png","language":"HTML","funding_links":["https://github.com/sponsors/deoostfrees"],"categories":[],"sub_categories":[],"readme":"# Gibki\r\n\r\nAn open source grid system based on Flexbox. [Open in CodePen](https://codepen.io/collection/pgogaZ).\r\n\r\n## Table of Contents\r\n\r\n- [Installation](#installation)\r\n  - [Download](#download)\r\n  - [Package Managers](#package-managers)\r\n- [Usage](#usage)\r\n  - [General](#general)\r\n  - [Nesting](#nesting)\r\n  - [Responsive Layouts](#responsive-layouts)\r\n  - [Wrapping](#wrapping)\r\n  - [Gutters](#gutters)\r\n  - [Directions](#directions)\r\n  - [Horizontal Alignment](#horizontal-alignment)\r\n  - [Vertical Alignment](#vertical-alignment)\r\n  - [Reordering](#reordering)\r\n- [Variables](#variables)\r\n  - [CSS Custom Properties](#css-custom-properties)\r\n  - [Sass Variables](#sass-variables)\r\n- [Browser Support](#browser-support)\r\n\r\n## Installation\r\n\r\n### Download\r\n\r\nCSS: `css/flex.min.css` (minified) or `css/flex.css` (un-minified)\r\n\r\n### Package Managers\r\n\r\nYou can also install Gibki using npm or yarn:\r\n\r\n```shell\r\nnpm install gibki\r\n```\r\n\r\nor\r\n\r\n```shell\r\nyarn add gibki\r\n```\r\n\r\nBe sure to include the corresponding SCSS or CSS file.\r\n\r\n## Usage\r\n\r\n### General\r\n\r\n#### .container\r\n\r\nContainers are not required for the grid, but provide a way to center content. The width can be customize using [CSS custom properties](#css-custom-properties).\r\n\r\n![](https://rqrauhvmra.com/gibki/img/container.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\nIf needed, you can also use `.container--small` for a smaller width:\r\n\r\n![](https://rqrauhvmra.com/gibki/img/container--small.png)\r\n\r\n```html\r\n\u003cdiv class=\"container container--small\"\u003e\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\nor `.container--full` for a full width container:\r\n\r\n```html\r\n\u003cdiv class=\"container container--full\"\u003e\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex\r\n\r\n`.flex` is the wrapper for columns.\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex__\r\n\r\n`.flex__` classes create different column sizes.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex__.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__10\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__7\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__5\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex__auto\r\n\r\n`.flex__auto` creates columns that take up the remaining space.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex__auto.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__auto\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__auto\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__auto\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Nesting\r\n\r\nTo nest content with the default grid, add a new `.flex` container and a set of `.flex__` columns within an existing `.flex__` column.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/nesting.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__lg-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__lg-8\"\u003e\r\n      \u003cdiv class=\"flex\"\u003e\r\n        \u003cdiv class=\"flex__6\"\u003e\u003c/div\u003e\r\n        \u003cdiv class=\"flex__auto\"\u003e\u003c/div\u003e\r\n        \u003cdiv class=\"flex__auto\"\u003e\u003c/div\u003e\r\n      \u003c/div\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Responsive Layouts\r\n\r\nThe grid system allows you to create responsive layouts by defining different column widths for each viewport. There are four breakpoints that determine the viewports:\r\n\r\n- \u0026#x3E;= 500px: Small `sm`\r\n- \u0026#x3E;= 700px: Medium `md`\r\n- \u0026#x3E;= 1000px: Large `lg`\r\n- \u0026#x3E;= 1200px: Extra large `xl`\r\n\r\nThese container breakpoints can be customized using [Sass variables](#sass-variables).\r\n\r\n![](https://rqrauhvmra.com/gibki/img/responsive-layouts.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__md-6 flex__lg-3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6 flex__lg-3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6 flex__lg-3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6 flex__lg-3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Wrapping\r\n\r\nBy default, columns will wrap if necessary.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/wrapping.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--wrap-reverse\r\n\r\nThe columns will wrap if necessary but in reverse order.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--wrap-reverse.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--wrap-reverse\"\u003e\r\n    \u003cdiv class=\"flex__6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--nowrap\r\n\r\nThe columns will not wrap.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--nowrap.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--nowrap\"\u003e\r\n    \u003cdiv class=\"flex__6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Gutters\r\n\r\nThe columns and rows have horizontal and vertical spacing. These can be customized using [CSS custom properties](#css-custom-properties).\r\n\r\nYou can remove the spacing with `.flex--no-gutters`.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/gutters.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--no-gutters\"\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou can also only remove the horizontal gutters with `.flex--no-horizontal-gutters`.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--no-horizontal-gutters.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--no-horizontal-gutters\"\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nOr you can remove only the vertical gutters with `.flex--no-vertical-gutters`.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--no-vertical-gutters.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--no-vertical-gutters\"\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-6\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Directions\r\n\r\nThe following classes define the direction in which the columns are placed within the wrapper. By default, columns are set from left to right in `ltr` (left-to-right languages) and from right to left in `rtl` (right-to-left languages).\r\n\r\n![](https://rqrauhvmra.com/gibki/img/directions.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--row-reverse\r\n\r\nThe columns are placed from right to left in `ltr` and left to right in `rtl`.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--row-reverse.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--row-reverse\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--column\r\n\r\n`.flex--column` behaves the same way as `.flex--row` but the columns are stacked from top to bottom.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--column.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--column\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--column-reverse\r\n\r\n`.flex--column-reverse` behaves the same way as `.flex--row-reverse` but the columns are stacked from bottom to top.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--column-reverse.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--column-reverse\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Horizontal Alignment\r\n\r\nThe following classes define how columns are aligned along the main axis. They help distribute extra space between the items when they don't reach their maximum size. By default, columns are positioned at the beginning of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/horizontal-alignment.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--right\r\n\r\nThe columns are positioned at the end of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--right.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--right\"\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--center\r\n\r\nThe columns are positioned at the center of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--center.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--center\"\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--space-between\r\n\r\nThe columns are evenly spread horizontally; the first column is at the beginning of the container, and the last column is at the end of the container. Space is distributed between the columns.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--space-between.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--space-between\"\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--space-around\r\n\r\nThe columns are positioned with equal space before, between, and after them.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--space-around.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--space-around\"\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__3\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Vertical Alignment\r\n\r\nThe following classes define how columns are aligned along the cross axis when they don't reach their maximum size.\r\n\r\n#### .flex--stretch\r\n\r\nThis is the default value. You don't need to add the class to the wrapper; it stretches the height of the columns to fill the container while respecting `min-width` and `max-width`.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--stretch.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou can apply `.flex--stretch` to individual columns if necessary.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--stretch-individual.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--top\"\u003e\r\n    \u003cdiv class=\"flex__4 flex--stretch\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--top\r\n\r\nThe columns are positioned at the top of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--top.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--top\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou can also apply `.flex--top` to individual columns.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--top-individual.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__4 flex--top\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--bottom\r\n\r\nThe columns are positioned at the bottom of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--bottom.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--bottom\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou can also apply `.flex--bottom` to individual columns.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--bottom-individual.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__4 flex--bottom\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### .flex--middle\r\n\r\nThe columns are positioned at the vertical center of the container.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--middle.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex flex--middle\"\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou can also apply `.flex--middle` to individual columns.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/flex--middle-individual.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__4 flex--middle\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__4\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Reordering\r\n\r\nUse `.flex--order-` classes to control the visual order of your content.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/reordering.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-5\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-6 flex--order-lg-3\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-3 flex--order-lg-6\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--order-1\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### Offsetting Columns\r\n\r\nOffset a column by adding `.flex--offset-` classes.\r\n\r\n![](https://rqrauhvmra.com/gibki/img/offset.png)\r\n\r\n```html\r\n\u003cdiv class=\"container\"\u003e\r\n  \u003cdiv class=\"flex\"\u003e\r\n    \u003cdiv class=\"flex__2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__8 flex--offset-2\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__md-8 flex--offset-md-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex__lg-4\"\u003e\u003c/div\u003e\r\n    \u003cdiv class=\"flex__6 flex--offset-lg-2\"\u003e\u003c/div\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n## Variables\r\n\r\n### CSS Custom Properties\r\n\r\n```css\r\n  /* Container max width */\r\n  /* Based on 16px */\r\n  --gibki-container-max-width: 75rem; /* 1200px */\r\n  --gibki-small-container-max-width: 38.25rem; /* 612px */\r\n\r\n  /* Container padding */\r\n  /* Based on 16px */\r\n  --gibki-container-padding: 1.5rem; /* 24px */\r\n\r\n  /* Gutter width */\r\n  /* Based on 16px */\r\n  --gibki-gutter-vertical: 1.5rem; /* 24px */\r\n  --gibki-gutter-horizontal: 1.5rem; /* 24px */\r\n```\r\n\r\n### Sass Variables\r\n\r\n```scss\r\n$use-container-queries: false !default;\r\n\r\n// Breakpoints map\r\n// Container queries are based on the container's width (rem).\r\n// Media queries are based on the viewport width (em).\r\n// Based on 16px\r\n$gibki-breakpoints: (\r\n  'sm': 31.25em, // 31.25rem (500px) if $use-container-queries is true\r\n  'md': 43.75em, // 43.75rem (700px) if $use-container-queries is true\r\n  'lg': 62.5em,  // 62.5rem (1000px) if $use-container-queries is true\r\n  'xl': 75em     // 75rem (1200px) if $use-container-queries is true\r\n) !default;\r\n\r\n// Available columns\r\n$gibki-columns: 12 !default;\r\n```\r\n\r\nTo use the Sass variables, configure them via `@use ... with ()` when importing `gibki.scss`:\r\n\r\n```scss\r\n@use 'gibki' with (\r\n  $use-container-queries: true,\r\n  $gibki-columns: 6,\r\n  $gibki-breakpoints: ('sm': 20em, 'md': 40em)\r\n);\r\n```\r\n\r\n## Browser Support\r\n\r\nGibki supports the following browsers (all the latest versions):\r\n\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n- Edge\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeoostfrees%2Fgibki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeoostfrees%2Fgibki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeoostfrees%2Fgibki/lists"}