CODEWITHSUNDEEP
csscross-browser
mrKindo
mrKindo

Reputation: 53

Cross-browser Grid system in HTML

I want to apply a gridding system to my project, but the resource I got was applicable only to IE8-10, the grid doesn't work fine on other browsers.

I want the grid to display efficiently on Chrome, Opera, and Firefox(Cross-browser).

This the css code: 

body{
-ms-grid-columns: ;
-ms-grid-rows: ;
}
body{
  display: -ms-grid;
}

How can I do this?

Upvotes: 0

Views: 1253

Answers (2)

albert
albert

Reputation: 8153

css3 support cross-browser/platform is quite pathetic at the moment.
flexbox is an option, although with its limited support, @ least in legacy browsers, it's not a knockout. this depends on what you are supporting: how many browsers, browser versions, user agents, etc.? are there a lot of legacy or "non-modern" browsers in that list? then i would avoid flexbox.

i would use 960gs or unsemantic, cross-browser grid layout libraries. unsemantic is the successor, but they are both versatile, and very light-weight.

Upvotes: 1

johnkavanagh
johnkavanagh

Reputation: 4674

This has already been answered on Stack Overflow here.

The correct answer is by thirtydot on there. to paraphrase to bring that answer up-to-date and more relevant to your specific question:

Grid Layout has very poor support - the declarations you're using that start -ms are Microsoft vendor-specific and not supported by other browsers.

Webkit (the engine behind Chrome and Safari) has been working on an implementation as seen here but it's still incomplete and uses slightly-different syntax:

.gridWithFixed {
    display: -webkit-grid;
    -webkit-grid-columns: 7px 11px;
    -webkit-grid-rows: 17px 2px;
}

So, right now there isn't a way of implementing your CSS in a way that will work outside of nightly browser builds and IE10.

As an alternative, Flexbox has decent support (including IE10). So, the best you can do is use Flexbox instead.

Upvotes: 1

Related Questions