mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 08:34:27 +02:00
Code Issues Releases Wiki Activity

fix: Missing }

Browse Source
This commit is contained in:
Phuoc Nguyen
2023-11-22 21:21:28 +07:00
parent 4aa15b9851
commit 33b62e40a4
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
contents/grid-lines-background.mdx
View File

@@ -6,6 +6,7 @@ keywords: grid lines background, linear gradient, radial gradient
openGraphCover: /og/css-layout/grid-lines-background.png openGraphCover: /og/css-layout/grid-lines-background.png
thumbnail: /assets/css-layout/thumbnails/grid-lines-background.png thumbnail: /assets/css-layout/thumbnails/grid-lines-background.png
title: Grid lines background title: Grid lines background
updated: '2023-11-22'
--- ---
Adding a grid lines background in CSS is an awesome way to give your website some visual interest and structure. This post will show you two simple ways to achieve this. Adding a grid lines background in CSS is an awesome way to give your website some visual interest and structure. This post will show you two simple ways to achieve this.
@@ -108,6 +109,7 @@ To adjust the color and spacing of lines, simply change the value of `gray` to a
linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px); linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
background-size: 2.5rem 2.5rem; background-size: 2.5rem 2.5rem;
background-position: center center; background-position: center center;
}
``` ```
```html index.html ```html index.html
@@ -126,9 +128,14 @@ We can use a similar approach to create a grid with a dot background, but this t
background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px); background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px);
background-size: 2.5rem 2.5rem; background-size: 2.5rem 2.5rem;
background-position: center center; background-position: center center;
}
``` ```
```html index.html ```html index.html
<div class="grid"></div> <div class="grid"></div>
``` ```
</Playground> </Playground>
## See also
- [Snap a draggable element to a grid](https://phuoc.ng/collection/react-drag-drop/snap-a-draggable-element-to-a-grid/)