SSteven Posted January 30, 2019 Share Posted January 30, 2019 The following codepen illustrates positioning items using grid-column-start: grid-areaname. It sets grid-auto-flow to column and works as I expect. It is from the quackit page on grid-column-start. #grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "a b c" "d e f" "g h i"; grid-auto-flow: column; grid-gap: 1px; } #grid > div:nth-child(4) { grid-column-start: f; background: limegreen; } <div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> However, when I set grid-auto-flow to row (the default value), a gap is left in the layout, for the auto-placed items, as seen in the following codepen: Why does this difference in behavior occur? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now