neurogrid-layout/dist/style.css

🧠 NeuroGrid — content-aware adaptive layout for React

.neuro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto;align-items:stretch;grid-auto-flow:dense}@media (max-width: 900px){.neuro-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.neuro-grid{grid-template-columns:1fr}}.neuro-block{background:#00ffff14;border:1px solid rgba(0,255,255,.2);padding:1rem;border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.3s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;height:100%}.neuro-block:hover{box-shadow:0 0 12px #0ff4;transform:scale(1.01)}.neuro-block.active{background:#ff03;box-shadow:0 0 15px #ff06}.neuro-block[data-size=wide]{grid-column:span 2}.neuro-block[data-size=full]{grid-column:span 3}@media (max-width: 900px){.neuro-block[data-size=wide],.neuro-block[data-size=full]{grid-column:span 2}}@media (max-width: 600px){.neuro-block[data-size=wide],.neuro-block[data-size=full]{grid-column:span 1}}.neuro-grid>.neuro-block:last-child:nth-child(3n+1){grid-column:span 3}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}.mini{background:#00ffff26;padding:12px;border-radius:6px;text-align:center;color:#0ff;font-weight:700;font-size:.9rem;transition:.2s ease}.mini:hover{background:#00ffff4d;transform:scale(1.05)}.mini.active{background:#ff06;color:#000}