1

I'm running into an issue with creating a blog layout with css-grid. The issue is that the blog is responsive on all view ports up until I add a code block to the post. Should the code block have a single line that extends outside of the grid (or view port for that matter) it goes on it's merry way off into the unknown. I've figured out that it initially had to do with me using 1fr since this is acting as free space or a kind of auto property the children I am assuming inherit the properties of this and size themselves accordingly.

grid-template-columns: 25px 1fr 25px;

> * {
  grid-column: 2; /* start all content at grid line 2 */
  margin: 0.5em 0;
}

I switched to using minmax() and started having more success with corralling my code blocks:

display: grid;
grid-template-columns: 25px minmax(250px, auto) 25px;
margin: 100px auto;
max-width: 1000px;

> * {
  grid-column: 2;
  margin: 0.5em 0;
}

Again however I'm coming back to auto properties screwing me over. Should the auto property be chosen the code block run amuck again. So I went to a media query:

@media (max-width: 345px) {
  grid-template-columns: 25px minmax(250px, 310px) 25px;
}

The fixed minmax() values solve my problem, but only for that defined query. I don't think I should have to create a ton of media queries to pull this off (nor do I want too). I've tried min-content and max-content with minmax(), but I believe they have auto properties as well because I end up with the same issues. I've been looking through the docs on MDN to see what my options are, but I'm not finding anything. Is there something I'm just not seeing?

Full code:

import styled from 'styled-components'

const Post = styled.article`
  display: grid;
  grid-template-columns: 25px minmax(250px, max-content) 25px;
  margin: 100px auto;
  max-width: 1000px;

  > * {
    grid-column: 2;
    margin: 0.5em 0;
  }

  /* Other styles for elements from markdown here */

  @media (max-width: 345px) {
    grid-template-columns: 25px minmax(250px, 310px) 25px;
  }

  @media (min-width: 736px) {
    grid-template-columns: 50px 1fr 50px;
  }
 `

 Post.displayName = 'Post'

 export default Post

Visual:

iPhone6s view port example

rockchalkwushock
  • 1,143
  • 2
  • 9
  • 19
  • 1
    Keep in mind that a grid item cannot, by default, be smaller than its content. Try `min-width: 0` or `overflow: auto` on the expanding item. https://stackoverflow.com/q/43311943/3597276 – Michael Benjamin Jan 21 '18 at 15:36
  • 1
    @Michael_B thank you for the insight. I wasn't aware of that default property, and thank you for the link to more information on the subject. – rockchalkwushock Jan 21 '18 at 22:23

0 Answers0