Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Having trouble with the placement of components in a CSS grid layout.

OK! For context I am in the FSJS Tech degree program. I brilliantly used a grid layout for my for my navigation (I love they way I can move around the grid-template-areas for responsive design. However, I am now trying to apply a grid model to a form for capturing search parameters. I want the capture fields to be inline (one row) with their labels above them with the search button placed under the row. I thought I could do it from my experience with the nav model, but something is not working. The fields are displaying in block mode with the labels to the left. Here are the relevant snippets, first the pug, then the CSS.

form.book-search(action='/book?search=true', method='post')
    fieldset.search-grid
        .title-set
            label(for='title') Title
            input(type='text', name='title')
        .author-set
            label(for='author') Author
            input(type='text', name='author')
        .genre-set
            label(for='genre') Genre
            input(type='text', name='genre')
        .published-set
            label(for='first_published') First Pub
            input(type='text', name='first_publshed')
    input(type='submit', value='Search')

now the CSS

    .search-grid {
        display: inline-grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 20px);
        grid-template-areas:
        "tHead   aHead  gHead  pHead"
        "tInput  aInput gInput pInput"
        "sButton .      .      ."
    }

    [class$='-set'] label,
    [class$='-set'] input {
        justify-self: start;
        align-self: center;
    }

And

.title-set > label {
    grid-area: tHead;
}

.author-set > label {
    grid-area: aHead;
}

.genre-set > label {
    grid-area: gHead;
}

.published-set > label {
    grid-area: pHead;
}

.title-set > input {
    grid-area: tInput;
}

.author-set > input {
    grid-area: aInput;
}

.genre-set > input {
    grid-area: gInput;
}

.published-set > input {
    grid-area: pInput;
}

.book-search input {
    grid-area: sButton;
    margin-top: 1em;
}

Any help is appreciated.

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The issue might become more obvious if you expand your pug into HTML. The labels and inputs are all being given grid area names by the CSS, but since they are not children of the search-grid (the fieldset), they are not grid items. The div's that enclose the sets are grid items, but they have no area designations.

Doug Hawkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points
Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

Steven: Thank you for that answer. It was valuable for a couple of reasons. First, I had no understanding that the grid items must be direct children of the grid. I had thought being within (under) the grid was sufficient. The second benefit was I discovered that I can go in both directions with the website HTML2Jade.org. I had only ever gone from HTML to Pug but discovered it will also go Pug to HTML. I might have taken a very long time to discover that, so thank you. So, I think the solution is probably to remove the divs from [class$='-set'] and place those classes on the label and input tags respectively, thereby raising them to the level of children -- if I understand what you are saying.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

That sounds right, if you mean remove the div's completely. Give it a try and see!

Doug Hawkinson
.a{fill-rule:evenodd;}techdegree
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Points

And, not only were you informative. I worked brilliantly. Thank you. And, yes, removing the divs altogether is what I meant. I love it when a plan comes together.