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

feat: Simple grid

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 13:45:37 +07:00
parent b49ac2a911
commit f016b79765
7 changed files with 103 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
contents/_includes/patterns/simple-grid.njk Normal file
View File

@@ -0,0 +1,15 @@
<div class="simple-grid">
<div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--fill">{% rectangle "hor", "md", 100 %}</div>
</div>
<div class="simple-grid">
<div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
</div>
<div class="simple-grid">
<div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
<div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
</div>

1
contents/index.njk
View File

@@ -114,6 +114,7 @@ eleventyExcludeFromCollections: true
{% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %}
{% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %}
{% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %}
{% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %}
</div>
</div>

54
contents/simple-grid.md Normal file
View File

@@ -0,0 +1,54 @@
---
layout: layouts/post.njk
title: Simple grid
description: Create a simple grid with CSS flexbox
keywords: css flexbox, css flexbox grid, css grid, css layout
---
## HTML
```html
<!-- Row -->
<div class="simple-grid">
<!--Cell with given width. Replace 25% with whatever you want -->
<div class="simple-grid__cell simple-grid__cell--1/4">25%</div>
<!-- Cell that takes remaining width -->
<div class="simple-grid__cell simple-grid__cell--fill">
...
</div>
</div>
```
## CSS
```css
.simple-grid {
display: flex;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.simple-grid__cell {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.simple-grid__cell--fill {
flex: 1;
}
/* Cell with given width */
.simple-grid__cell--1\/2 {
flex: 0 0 50%;
}
.simple-grid__cell--1\/3 {
flex: 0 0 33.3333333%;
}
.simple-grid__cell--1\/4 {
flex: 0 0 25%;
}
```
{% demo %}{% include "patterns/simple-grid.njk" %}{% enddemo %}

145
pages/simple-grid/index.tsx
View File

@@ -1,145 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.SimpleGrid}>
<Head>
<meta name="description" content="Create a simple grid with CSS flexbox" />
<meta name="og:description" content="Create a simple grid with CSS flexbox" />
<meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
</Head>
<BrowserFrame
html={`
<!-- Row -->
<div class="row">
<!--Cell with given width. Replace 25% with whatever you want -->
<div class="row__cell row__cell--1/4">25%</div>
<!-- Cell that takes remaining width -->
<div class="row__cell row__cell--fill">
...
</div>
</div>
`}
css={`
.row {
display: flex;
margin-left: -8px;
margin-right: -8px;
}
.row__cell {
padding-left: 8px;
padding-right: 8px;
}
/* Cell with given width. Replace 25% with whatever you want */
.row__cell--1/4 {
flex: 0 0 25%;
}
.row__cell--fill {
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
<div style={{ flex: '0 0 50%', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
<div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
<div style={{ flex: '0 0 25%', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
</PatternLayout>
);
};
export default Details;

56
patterns/simple-grid/Cover.tsx
View File

@@ -1,56 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '80%' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<div style={{ flex: '0 0 50%', padding: '0 4px' }}>
<Rectangle />
</div>
<div style={{ flex: '1', padding: '0 4px' }}>
<Rectangle />
</div>
</div>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<div style={{ flex: '0 0 33%', padding: '0 4px' }}>
<Rectangle />
</div>
<div style={{ flex: '0 0 33%', padding: '0 4px' }}>
<Rectangle />
</div>
<div style={{ flex: '0 0 33%', padding: '0 4px' }}>
<Rectangle />
</div>
</div>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ flex: '0 0 25%', padding: '0 4px' }}>
<Rectangle />
</div>
<div style={{ flex: '1', padding: '0 4px' }}>
<Rectangle />
</div>
<div style={{ flex: '0 0 25%', padding: '0 4px' }}>
<Rectangle />
</div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -71,6 +71,7 @@
@import './patterns/search-box';
@import './patterns/separator';
@import './patterns/sidebar';
@import './patterns/simple-grid';
@import './patterns/slider';
@import './patterns/spin-button';
@import './patterns/stacked-cards';

32
styles/patterns/_simple-grid.scss Normal file
View File

@@ -0,0 +1,32 @@
.simple-grid {
display: flex;
margin-left: -0.25rem;
margin-right: -0.25rem;
/* Demo */
margin-bottom: 0.25em;
margin-top: 0.25em;
height: 100%;
width: 100%;
}
.simple-grid__cell {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Cell with given width */
.simple-grid__cell--1\/2 {
flex: 0 0 50%;
}
.simple-grid__cell--1\/3 {
flex: 0 0 33.3333333%;
}
.simple-grid__cell--1\/4 {
flex: 0 0 25%;
}
.simple-grid__cell--fill {
flex: 1;
}