html


CSS: Reset width for items in CSS Grid


We have a legacy section of tiled items that were done with Flexbox. The container of the items is a ul:
ul.icon-grid {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}
And then the items inside are li:
.icon-swatch__wrapper {
width: 180px;
height: 110px;
text-align: center;
font-size: 12px;
border: 1px solid #ccc;
margin: 5px;
padding: 10px;
}
I had to use a width and height since the tiles have varied content and I needed them to be the same size. Obviously, if I could use css grid I'd have no such problem.
So I am trying to add a scss block inside a #supports for grid, which although it works the fixed width of the items is throwing off the grid gutters.
#supports (display: grid) {
ul.icon-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
list-style: none;
padding: 0;
.icon-swatch__wrapper, li {
margin: 0;
width: auto;
}
}
}
I tried using width: auto as you see to remove the previously used width: 180px for the old flexbox version, but the tiles do not properly size to the grid.
If I remove the width: 180px from the flexbox version, the grid version looks perfect. But then if someone has a browser that supports flex but not gris, it looks terrible.
How can I basically "remove" the width: 180px?
With flexbox you need to define the size of flex items. You can use width, height and flex-basis.
With Grid, the approach is different. You can size the items at the container level. No need to define a size on the items.
ul.icon-grid {
display: grid;
grid-template-columns: repeat(4, 180px);
grid-auto-rows: 110px;
grid-gap: 10px;
}

Related Links

What is shadow root
How can I centre this text vertically in the span?
Checkbox beside label as table-cell
Bootstrap navbar: brand on left - login on right - collapsible menu on center
Nest div tag override parent div tags property
css problems in IE11
CSS make p tag not stretch div width
HTML Document with underlined fields for filling
Bootstrap, strange lag
How to show top-right part of an iframe/object content in a small frame?
Custom Font SVG on webpage
HTML - Divison over edge of screen [closed]
Bootstrap 3.3.6 Grid boundaries not providing a rigid structure
Parent div height 0, clearfix doesn't work
Bootstrap navigation troubles - Responsive issues
HTML video tag issue on MS Edge v25 and IE 11 v11.63

Categories

HOME
html
osx
jira-rest-java-api
location
bazel
windbg
charts
permutation
google-cloud-dataflow
modem
content-management-system
sample
sharepoint-2010
fluid
remote-desktop
export
cocoa
pyomo
r.net
phpdocumentor2
azure-web-app-service
xilinx
invoices
docker-volume
fortify
clip
esb
nunjucks
teamspeak
xodus
revel
opensaf
int
youtrack
messagebroker
refresh
integrate
multilabel-classification
mp3
addition
dovecot
scrum
crf++
global
product
codekit
wsh
angular-ui-tabset
suse
logmein
jgraphx
sdwebimage
6502
curses
nightmare
modular-arithmetic
pry
vdm++
crosstool-ng
sumologic
google-authenticator
one-time-password
ojs
substitution
maven-dependency-plugin
win-phone-silverlight-8.1
atof
stochastic
mssql-jdbc
libusb-1.0
cocoalumberjack
yeogurt
facebook-feed
turn
qtreeview
google-cloud-source-repos
preloadjs
android-update-app
web.config-transform
pysphere
genesis
polymorphic-associations
ng-map
pocket
sat-solvers
google-plus-signin
global-temp-tables
server-push
jinput
mgo
execv
fontello
turbo-pascal
ggbiplot
reasoning
django-pyodbc
mvapich2
itemrenderer
file-in-use
wse
grails-2.1
sites
apache-vysper
lfs
loaddata
adwhirl
firefox3.6
opensoundcontrol

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App