Conditional Styling For Autoplacement Changes in CSS Grid
I am looking for a way to detect when the grid-auto-flow css property has been engaged and apply conditional styling, eg. larger font-size.
Full demo example: Stackblitz (as you can’t resize in Stackoverflow’s snippet container).
Is this possible using just CSS? Or am I going the wrong way about solving this?
I need the font-size: x to get larger when the screen gets smaller. I’d rather refrain from introducing any javascript (and or) media queries into this.
unless there’s a media-query that can detect this change
main { display: grid; color: rgb(107, 107, 107); font-size: 1em; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-flow: row; } main section:first-child h1 { padding-left: var(--page-left-padding); } main section article { display: grid; grid-template-columns: repeat(2, 1fr); } main section article div { align-self: center; font-size: 0.3em; } main section article div:last-child { padding-bottom: 3em; } main section article p { font-size: 1em; } ul, li { text-decoration: none; list-style: none; }<main> <section> <h1>If you resize, this text will be positioned above, not to the side.</h1> </section> <section> <article> <p>Lorem Ipsum</p> <div> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Praesent iaculis tempor</li> <li>nulla nec rutrum. Donec eu purus</li> <li>uspendisse potenti</li> <li>libero sem sollicitudin</li> </div> </article> <article> <p>Mauris sem tortor</p> <div> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Praesent iaculis tempor</li> <li>nulla nec rutrum. Donec eu purus</li> <li>uspendisse potenti</li> <li>libero sem sollicitudin</li> </div> </article> </section> </main>
To detect changes of screen width use media-query, they are made for this. And you can set any font-size according to your media breakpoints. I agree, media breakpoints can’t detect changes in number of columns while using grid-template-columns auto-fit. But it’s CSS friendly.
To connect grid-template-columns count and font size you can use following way.
main { grid-template-columns: repeat(2, 1fr); } main section:first-child h1 { font-size: 28px; } @media (max-height: 475px) { main { grid-template-columns: repeat(1, 1fr); } main section:first-child h1 { font-size: 36px; } } Or, if you want to count columns and detect changes caused by auto-fit – this is task for JavaScript.
Made simple JavaScript, which counts the number of blocks in first column, comparing their offsetTop. Then we gat the number of columns in CSS variable --cols and can use it anywhere we like, for instance font-size: calc(36px / var(--cols));
countCols(); window.addEventListener("resize", function() { countCols(); }); function countCols() { let cols = 0; let mainOffsetTop = document.querySelector('main section').offsetTop; /* main offset top */ let mainSections = document.querySelectorAll('main section'); for (let i = 0; i < mainSections.length; i += 1) { /* (section offset top) and (main offset top) == for the first row elements */ if((mainSections[i].offsetTop - mainOffsetTop) == 0) { cols++; } else { break; } } // getting CSS variable in body document.documentElement.style.setProperty('--cols', cols); }main { display: grid; color: rgb(107, 107, 107); font-size: 1em; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-flow: row; } main section:first-child h1 { padding-left: var(--page-left-padding); font-size: calc(36px / var(--cols)); } main section article { display: grid; grid-template-columns: repeat(2, 1fr); } main section article div { align-self: center; font-size: 0.3em; } main section article div:last-child { padding-bottom: 3em; } main section article p { font-size: 1em; } ul, li { text-decoration: none; list-style: none; }<main> <section> <h1>If you resize, this text will be positioned above, not to the side.</h1> </section> <section> <article> <p>Lorem Ipsum</p> <div> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Praesent iaculis tempor</li> <li>nulla nec rutrum. Donec eu purus</li> <li>uspendisse potenti</li> <li>libero sem sollicitudin</li> </div> </article> <article> <p>Mauris sem tortor</p> <div> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Praesent iaculis tempor</li> <li>nulla nec rutrum. Donec eu purus</li> <li>uspendisse potenti</li> <li>libero sem sollicitudin</li> </div> </article> </section> </main>
