css3 - Why does grid-gap change a column's width in CSS Grid? -


using css-grid have setup 24 column grid inside of container 1002px wide.

inside container div, there child div spans 21 columns. width of expecting of child div is:

21/24 * 1002 = 876.75

when grid-gap property added, width of column decreases 873px, not desired.

how can write css width of div 876.75px?

see example: https://codepen.io/edtalmadge/pen/mvlrqw?editors=1100

html

<div class="container1">   <div class="column">     <p>no grid-gap ...width 876px expected</p>   </div> </div>  <div class="container2">   <div class="column">     <p>grid-gap: 30px; ...width becomes 873px (3px narrow)</p>   </div> </div>

css

   /* no grid gap */    .container1 {       display: grid;       grid-template-columns: repeat(24, 1fr);       width: 1002px;       background-color: #ededed;     }      /* has grid gap */     .container2 {       grid-gap: 30px; // causes width of .column increase       display: grid;       grid-template-columns: repeat(24, 1fr);       width: 1002px;       background-color: #ededed;     }      .column {       grid-column: span 21;       background-color: gray;     } 

.container1 {    display: grid;    grid-template-columns: repeat(24, 1fr);    width: 1002px;    background-color: #ededed;  }    .container2 {    display: grid;    grid-template-columns: repeat(24, 1fr);    width: 1002px;    background-color: #ededed;    grid-gap: 30px;    border-top: 1px solid yellow;  }    .column {    grid-column: span 21;    background-color: gray;  }    p {    text-align: center;    color: #fff;    font-family: helvetica, arial, sans-serif;  }
<div class="container1">    <div class="column">      <p>no grid-gap ...width <strong style="color: lime;">876px</strong> expected</p>    </div>  </div>    <div class="container2">    <div class="column">      <p>grid-gap: 30px; ...width becomes <strong style="color: #fb665e;">873px</strong> (3px narrow)</p>    </div>  </div>

both grid containers have 24 columns , width of 1002px:

grid-template-columns: repeat(24, 1fr); width: 1002px

your question involves first 21 columns:

.column {    grid-column: span 21; }

this means last 3 columns , grid gaps should excluded calculations.

enter image description here

using firefox's grid overlay tool. striped bars gutters.

first container

in first container, having no gutters, each fr unit equal 41.75px.

1002 / 24 = 41.75

this means 21 columns equal width of 876.75px.

41.75 * 21 = 876.75px

second container

with regard second container, first thing remember fr unit represents free space. space left on after other sizes have been factored in, including gutters.

7.2.3. flexible lengths: fr unit

a flexible length or <flex> dimension fr unit, represents fraction of free space in grid container.

free space

equal available grid space minus sum of base sizes of grid tracks (including gutters), floored @ zero. if available grid space indefinite, free space indefinite well.

in first container, space free space. not in second container.

also important note: grid-gap property applies between grid items, , never between items , container.

10.1. gutters: grid-column-gap, grid-row-gap, , grid-gap properties

these properties specify gutters between grid rows , grid columns, respectively.

therefore, in 24-column grid there 23 gutters (see image above).

so second container must first subtract space taken gutters:

1002 - (30 * 23) = 312

we know free space in second container 312px.

now need determine value of each fr unit.

312 / 24 = 13

so each fr unit equal 13px.

now need figure out total width of gutters , fr's 21 columns:

21 * 13 = 273px (total width of free space) 20 * 30 = 600px (total width of gutters)           -----           873px

or can subtract 3 fr units , 3 gutters total width:

1002px - (13 * 3) - (30 * 3) = 873px

solution

since you're using fr unit establishing length, , amount of free space differs between containers, code can achieve equal width both containers @ full width (24 columns).

to achieve equal width @ less full width, you'll need use different sizing method, such px or em, columns.

there may other solutions depending on overall goal.


Comments

Post a Comment

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start. when slide right can simple listen reachedend , push slide array i'm looping. but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide. the code below work animates slide change index 1. slide = [0,1,2] //example loop slidechanged(event) { if(this.slides.isbeginning()){ this.slide = [this.slide[0]-1, ...this.slide]; this.slides.update(); this.slides.slideto(1) } } <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)"> <ion-slide *ngfor="let item of slide"> <h1>slide {{item}}</h1> </ion-slide> </ion-slides> any appreciated! you can using ionslidenextend , ionslideprevend events slides . please...
Read more

Add a dynamic header in angular 2 http provider -

i have http interceptor built via tutorial https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2 the problem need have dynamic header changes automatically once changes 'mode' in app. service able tell interceptor change header, or have interceptor pull header (which string)from service each request. able throwing away patch method, call http.patch('new header string') set header string. call in service controls 'mode' setting. wondering if there way interceptor pull recent value service each request or if can add method http provider via interceptor? i've tried call service in interceptor each request returns undefined. because creating new instance of service or copying value before service fired , loaded/changed data. i don't want pass header string every http provider call because defeats purpose of having interceptor, id able set once changes or have provider fetch service before makes request. tl;dr : need add autom...
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more