复合网格生成器

下载代码

html

css

分享到微信朋友圈

html

<div class="wrapper">
	<header>
		<h1>复合网格生成器</h1>
		<div>
			<p>生成复合网格的小工具。输入每个网格的列数，它们将神奇地合并到复合网格中。</p>
			<p>使用 CSS 网格进行布局时，请使用网格模板列属性中的输出。</p>
		</div>
	</header>
	<form class="form">
		<div class="form__group">
			<label for="grid1">Grid 1
				<input type="number" id="grid1" value="2" min="2" max="10" data-input />
			</label>
			<div class="sm-grid" data-sm-grid>
				<div class="sm-grid__item"></div>
				<div class="sm-grid__item"></div>
			</div>
		</div>
		<div class="form__group">
			<label for="grid2">Grid 2
				<input type="number" id="grid2" value="4" min="2" max="10" data-input />
			</label>
			<div class="sm-grid sm-grid--second" data-sm-grid>
				<div class="sm-grid__item"></div>
				<div class="sm-grid__item"></div>
				<div class="sm-grid__item"></div>
				<div class="sm-grid__item"></div>
			</div>
		</div>
		<div class="form__info" data-info>
			<p>One grid is a multiple of the other</p></div>
		<button class="form__button" type="button" data-button>Create grid</button>
	</form>
	<code class="result" data-result>
		1fr 1fr 1fr 1fr
	</code>
	<div class="grid" data-grid>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");
* {
  box-sizing: border-box;
}

p {
  max-width: 70ch;
  line-height: 1.5;
  color: #e5e7f0;
}

a {
  color: #868db6;
}
a:hover, a:focus {
  color: orchid;
}

body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #171926;
  color: white;
  font-size: 1.2rem;
  padding: 1rem 1rem 3rem 1rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media (min-width: 50rem) {
  body {
    padding: 3rem 3rem 5rem 3rem;
  }
}

.wrapper {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 50rem) {
  .wrapper {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }
}

header {
  grid-column: 1 / -1;
}

@media (min-width: 50rem) {
  .form {
    grid-column: 1;
    grid-row: 2;
  }
}

label {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}

input {
  font-size: 1.4rem;
  max-width: 6rem;
  text-align: center;
  margin-left: 1rem;
  border: none;
  padding: 0.5rem;
  background: #040406;
  color: white;
}

@media (min-width: 50rem) {
  .result {
    grid-column: 1;
    grid-row: 3;
  }
}

.form__button {
  font-size: inherit;
  font-family: inherit;
  padding: 0.8rem 1.9rem;
  border: none;
  border-radius: 0.5rem;
  margin-top: 2rem;
  font-weight: 700;
  background-color: turquoise;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 25rem;
  gap: 1rem;
}
@media (min-width: 50rem) {
  .grid {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
}

.item {
  background-color: orchid;
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  animation: fadeIn 750ms ease-in-out var(--delay, 0ms) forwards;
  box-shadow: 0.25rem 0.25rem 1rem #0d0f16;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.sm-grid {
  width: 9rem;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-auto-rows: 5rem;
  gap: 0.3rem;
  margin-left: 2rem;
}

.sm-grid--second {
  grid-template-columns: repeat(var(--cols, 4), 1fr);
}

.sm-grid__item {
  background-color: rgba(64, 224, 208, 0.3);
}

.form__group {
  margin-bottom: 2rem;
  display: flex;
}

.form__info {
  --primary: #666ea3;
  background-color: #11131c;
  padding: 0.25rem 1.5rem;
  font-size: 1rem;
  opacity: 0;
  border-radius: 0.3rem;
  position: relative;
  border: 1px solid var(--primary);
}
.form__info::before {
  content: '\2139';
  position: absolute;
  top: -0.6rem;
  font-size: 1.1rem;
  color: var(--primary);
  border-radius: 50%;
  width: 1.45rem;
  height: 1.45rem;
  border: 2px solid var(--primary);
  text-align: center;
  background-color: #171926;
}

JavaScript

const code = document.querySelector('[data-result]')
const grid = document.querySelector('[data-grid]')
const button = document.querySelector('[data-button]')
const inputs = [...document.querySelectorAll('[data-input]')]
const smallGrids = [...document.querySelectorAll('[data-sm-grid]')]
const infoBox = document.querySelector('[data-info]')

const real_sort = function(a, b) {return a - b}

const getInputValues = () => {
	return inputs.map(input => parseInt(input.value))
}

let grids = getInputValues()

const createArray = (n) => {
	const newArray = new Array(n).fill(1)
	return newArray.map((i, index) => 1 / n * index).slice(1)
}

const initialValues = () => {
	const grid1 = createArray(grids[0])
	const grid2 = createArray(grids[1])
	return [...grid1, ...grid2, 1].sort()
}

const render = (columns) => {
	const gridColumns = columns.map((column) => {
		return `${column}fr`
	}).join(' ')
	
	code.innerHTML = gridColumns
	grid.style.gridTemplateColumns = gridColumns
	renderGridElements(columns)
}

const gridIsMultiple = () => {
	const largestGrid = grids.sort(real_sort)[1]
	const smallestGrid = grids.sort(real_sort)[0]
	
	return largestGrid % smallestGrid === 0
}

const renderGridElements = (columns) => {
	const gridColumnElements = columns.map((el, index) => {
		return `<div class="item" style="--delay: ${index * 70}ms"></div>`
	}).join('')
	
	grid.innerHTML = gridColumnElements
}

const calculateGridColumns = () => {
	const smallestSegment = initialValues().reduce((acc, curr) => {
		let x = 1
		x = curr - acc < x ? curr - acc : x
		return x
	})

let y = 0
	const tracks = []

initialValues().map((column, index) => {
		const n = column / smallestSegment
		const roundedTrackValue = parseFloat(n.toFixed(2))
		
		/* Don’t include duplicate values */
		if (!tracks.includes(roundedTrackValue)) {
			return tracks.push(roundedTrackValue)
		}
	})

const columns = []
	/* Probably refactor this */
	tracks.map((i, index) => {
		/* Multiply each column so it’s at least 1fr */
		const column = (i - y) * 10
		columns.push(column.toFixed(1))
		y = i
	})
	
	/* Get the smallest column, that will be 1fr, others will be n * 1fr */
	const sm = columns.reduce((acc, curr) => acc > curr ? curr : acc)
	const colsFrs = columns.map((col) => Math.round(col / sm))
	
	/* Filter out any that are 0 */
	return colsFrs.filter((i) => i > 0)
}

const buildGrid = (e) => {
	e.preventDefault()
	
	/* If one grid is multiple of the other, find the largest and build that grid */
	if (gridIsMultiple()) {
		const columns = new Array(grids.sort()[1]).fill(1)
		return render(columns)
	}

return render(calculateGridColumns())
}

button.addEventListener('click', (e) => buildGrid(e))

const renderSmallGridItems = (quantity) => {
	const colsArray = new Array(quantity).fill(1)
	return colsArray.map((el) => {
		return `<div class="sm-grid__item"></div>`
	}).join('')
}

const renderSmallGrid = (index) => {
	const qty = getInputValues()[index]
	
	smallGrids[index].style.setProperty('--cols', qty)
	smallGrids[index].innerHTML = renderSmallGridItems(qty)
}

const renderInfo = () => {
	if (gridIsMultiple()) {
		infoBox.style.opacity = 1
		infoBox.setAttribute('aria-hidden')
	} else {
		infoBox.style.opacity = 0
		infoBox.setAttribute('aria-hidden', true)
	}
}

inputs.forEach((input, index) => {
	input.addEventListener('change', () => {
		grids = getInputValues()
		renderSmallGrid(index)
		renderInfo()
	})
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg